/* ===================================================================
   IRI CONSTRUCT — feuille de style (CSS)
   ===================================================================
   GUIDE RAPIDE — comment s'y retrouver dans ce fichier :

   1. Le fichier est découpé en grandes sections, chacune annoncée par
      un bandeau "===== NOM DE LA SECTION =====" (ex: HERO, HEADER,
      PORTFOLIO, SERVICE DETAIL...). Faites Ctrl+F et cherchez le nom
      de la page ou du bloc que vous voulez modifier pour y sauter
      directement.

   2. Deux polices sont utilisées sur tout le site, définies juste en
      dessous puis réutilisées via 2 variables :
        - CabinetGrotesk (variable --ff-head) : tous les GROS TITRES
          (h1, h2, h3, titre du Hero, titre de page...).
        - Satoshi (variable --ff-body) : tout le texte courant —
          paragraphes, descriptions, menus, boutons.
      Pour changer la police de TOUT le site, modifiez les @font-face
      ci-dessous ou les variables --ff-head / --ff-body un peu plus
      bas dans ce bloc.

   3. Pour changer la police (ou la taille, la couleur) d'UNE SEULE
      description précise sans toucher au reste du site : cherchez le
      mot  DESCRIPTION  avec Ctrl+F. Chaque paragraphe de description
      du site (Hero, page Portfolio, page Services, fiche projet...)
      est précédé d'un commentaire "DESCRIPTION —" qui indique où il
      apparaît sur le site. Repérez le bon commentaire, puis ajoutez
      une ligne "font-family: ...;" dans la règle CSS juste en dessous
      (ou changez "font-size:" pour la taille, "color:" pour la
      couleur). De même, le mot  TITRE  repère chaque gros titre.

   4. Les couleurs, arrondis et vitesses d'animation utilisés partout
      sur le site sont centralisés juste en dessous, dans le bloc
      ":root{ ... }". Changer une variable ici la change PARTOUT où
      elle est utilisée (pratique pour changer la couleur d'accent du
      site en un seul endroit). Pour un changement ponctuel sur un
      seul élément, modifiez plutôt sa règle précise, ailleurs dans
      le fichier.

   5. Ne modifiez pas les valeurs "clamp(min, fluide, max)" sans
      prudence : ça fait varier une taille automatiquement entre
      mobile et grand écran (ex: un titre plus petit sur téléphone,
      plus grand sur ordinateur). Les 3 valeurs peuvent être changées,
      mais testez sur mobile ET sur ordinateur après modification.
   =================================================================== */

/* ---------- Polices (fichiers hébergés en local, "variable fonts") ----------
   Chargées une fois ici, puis utilisées partout via --ff-head/--ff-body
   (voir juste en dessous). Pour AJOUTER une police supplémentaire (ex:
   une police différente pour une seule description) : ajoutez un bloc
   @font-face ici avec le fichier dans assets/fonts/, puis utilisez son
   nom dans "font-family:" à l'endroit voulu plus bas. ---------- */
@font-face {
  font-family: "CabinetGrotesk";
  src: url("../fonts/cabinet-grotesk/CabinetGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens (variables réutilisées dans tout le fichier) ---------- */
:root{
  /* [COULEUR] Fonds et textes sombres (Hero, header, footer, cartes sombres) */
  --ink:        #14120f;   /* fond très sombre (footer, Hero, cartes services...) */
  --ink-2:      #1c1914;   /* légèrement plus clair que --ink (cartes) */
  --ink-3:      #24201a;   /* encore un peu plus clair (survol des cartes) */

  /* [COULEUR] Fonds clairs */
  --cream:      #f7f2e8;   /* fond de page par défaut (body) */
  --cream-2:    #efe6d4;   /* fond légèrement plus foncé (bandeaux, survols) */
  --paper:      #fffdf9;   /* blanc cassé (cartes, formulaire de contact) */

  /* [COULEUR] Traits / séparateurs discrets */
  --line-dark:  rgba(247,242,232,.14);  /* traits sur fond sombre */
  --line-light: rgba(20,18,15,.1);      /* traits sur fond clair */

  /* [COULEUR] Couleur d'accent du site (orange/cuivre) — changez ces 3
     valeurs pour changer la couleur d'accent PARTOUT (boutons, liens
     actifs, icônes, chiffres clés...) */
  --accent:     #c6813f;   /* accent principal */
  --accent-2:   #a9682f;   /* accent plus foncé (survol, texte sur fond clair) */
  --accent-soft:#e7b578;   /* accent plus clair (texte sur fond sombre) */

  /* [COULEUR] Couleurs de texte selon le fond derrière */
  --text-on-dark:       #f7f2e8;                /* texte principal sur fond sombre */
  --text-on-dark-muted: rgba(247,242,232,.66);  /* texte secondaire/description sur fond sombre */
  --text-on-light:      #17140f;                /* texte principal sur fond clair */
  --text-on-light-muted:rgba(23,20,15,.62);     /* texte secondaire/description sur fond clair */

  /* Arrondis des coins (boutons, cartes, images) */
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;   /* boutons/badges "pilule" (bord totalement arrondi) */

  /* Largeur max du contenu centré + marge latérale (voir .container) */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 56px);

  /* Vitesse et courbe des animations/transitions (survols, apparitions...) */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur-s: .55s;   /* rapide — survol de bouton, etc. */
  --dur-m: 1s;     /* moyenne — apparition au scroll, etc. */
  --dur-l: 1.4s;   /* lente — menu mobile, header qui se cache, etc. */

  --header-h: 84px;   /* hauteur du header, sert à caler le contenu en dessous */

  /* [TITRE] / [DESCRIPTION] — LES 2 POLICES DU SITE, réutilisées partout.
     Voir le guide tout en haut du fichier pour changer la police d'UN
     SEUL élément sans toucher aux autres. */
  --ff-head: "CabinetGrotesk", ui-sans-serif, system-ui, sans-serif;  /* police des titres */
  --ff-body: "Satoshi", ui-sans-serif, system-ui, sans-serif;         /* police du texte courant / descriptions */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%;
}
html.has-lenis{scroll-behavior:auto;}
body{
  margin:0;
  font-family:var(--ff-body);
  background:var(--cream);
  color:var(--text-on-light);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}  /* champs de formulaire : utilisent automatiquement var(--ff-body) */
h1,h2,h3,h4,p,figure{margin:0;}
svg{display:block;}
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
::selection{background:var(--accent);color:#fff;}

body.no-scroll{overflow:hidden;height:100vh;}

/* ---------- Typographie générale ---------- */

/* [TITRE] Tous les h1/h2/h3/h4 du site, sauf ceux qui ont leur propre
   règle plus loin (ex: .hero__title, .page-banner h1, .pg-hero__content h1) */
h1,h2,h3,h4{
  font-family:var(--ff-head);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.08;
}
.text-accent{color:var(--accent);font-style:italic;font-family:var(--ff-head);}  /* mot en orange/italique dans un titre, ex: "ensemble" */
em{font-style:italic;color:var(--accent);}

/* Petit label en majuscules au-dessus d'un titre de section (ex: "PORTFOLIO") */
.section-kicker{
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:14px;
}
.section--dark .section-kicker{color:var(--accent-soft);}

/* [TITRE] Grand titre de section, réutilisé sur plusieurs sections de la
   page d'accueil (ex: "À propos", "Nos projets clés"...) */
.section-title{
  font-size:clamp(1.9rem, 1.5rem + 2vw, 3rem);
  max-width:18ch;
}

/* [DESCRIPTION] Paragraphe d'intro sous un .section-title — la règle de
   description la PLUS réutilisée du site. La modifier ici change toutes
   les sections qui l'utilisent ; pour une seule section, ciblez plutôt
   sa classe précise (ex: .about__lead, .service-detail__lead...). */
.section-lead{
  font-size:clamp(1rem, .95rem + .3vw, 1.15rem);
  color:var(--text-on-light-muted);
  max-width:46ch;
  margin-top:16px;
}
.section--dark .section-lead{color:var(--text-on-dark-muted);}
.section-head{margin-bottom:clamp(36px, 6vw, 64px);}
.section-head--split{
  display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-end;
}
.section-head--split .section-lead{margin-top:0;}

/* Espacement vertical par défaut d'une section pleine largeur */
.section{padding-block:clamp(72px, 11vw, 140px);}
.section--dark{background:var(--ink);color:var(--text-on-dark);}  /* variante fond sombre (ex: bandeau Services de l'accueil) */
.section--dark h2,.section--dark h3{color:var(--text-on-dark);}

/* ---------- Boutons (.btn, réutilisés partout : Hero, formulaires, CTA...) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;font-weight:600;font-size:.95rem;
  border-radius:var(--radius-pill);
  transition:transform var(--dur-s) var(--ease), background-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  white-space:nowrap;
}
.btn svg{transition:transform .45s var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn--pill{border-radius:var(--radius-pill);}
.btn--lg{padding:17px 32px;}
.btn--block{width:100%;}
.btn--accent{background:var(--accent);color:#fff;box-shadow:0 10px 26px -10px rgba(198,129,63,.6);}
.btn--accent:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(198,129,63,.65);}
.btn--ghost{border:1.5px solid var(--line-dark);color:var(--text-on-dark);}
.btn--ghost:hover{background:rgba(247,242,232,.08);border-color:rgba(247,242,232,.35);transform:translateY(-2px);}
.btn--light{background:var(--cream);color:var(--ink);}
.btn--light:hover{background:#fff;transform:translateY(-2px);}

.btn__spinner{display:none;}
.btn.is-loading .btn__label{opacity:0;}
.btn.is-loading .btn__spinner{
  display:block;position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn.is-loading{position:relative;color:transparent;pointer-events:none;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===================================================================
   PRELOADER — écran de chargement animé (logo + %) affiché seulement
   au tout premier chargement de la page d'accueil (index.html). Les
   autres pages n'ont pas ce bloc dans leur HTML, donc rien ne s'affiche
   chez elles. Généralement inutile d'y toucher.
   =================================================================== */
#preloader{
  position:fixed;inset:0;z-index:9999;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:opacity 1s var(--ease), visibility 1s var(--ease);
}
#preloader::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 20% 15%, rgba(198,129,63,.18), transparent 60%),
    radial-gradient(50% 40% at 85% 90%, rgba(198,129,63,.12), transparent 60%);
}
#preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
body.is-loading{overflow:hidden;height:100vh;}

.preloader__inner{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:18px;padding:24px;
  opacity:0;transform:translateY(10px);
  animation:plInnerIn .7s var(--ease) .05s forwards;
}
@keyframes plInnerIn{to{opacity:1;transform:none;}}

/* ---------- Logo mark: fills bottom-to-top in sync with the real load percentage ---------- */
.pl-mark{
  position:relative;
  width:min(20vw, 92px);
  aspect-ratio:900/922;
}
.pl-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;}
.pl-mark__ghost{opacity:.16;}
.pl-mark__fill{
  position:absolute;inset:0;
  --p:0%;
  -webkit-mask-image:linear-gradient(to top, #000 var(--p), transparent var(--p));
  mask-image:linear-gradient(to top, #000 var(--p), transparent var(--p));
}
.pl-mark__fill img{filter:drop-shadow(0 0 16px rgba(198,129,63,.6));}

.preloader__count{
  font-family:var(--ff-head);
  font-size:clamp(2.6rem, 11vw, 4.2rem);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--text-on-dark);
  font-variant-numeric:tabular-nums;
}

.preloader__slogan{
  font-family:var(--ff-head);
  color:var(--text-on-dark-muted);
  font-size:clamp(.95rem, 2.6vw, 1.15rem);
  font-weight:600;
  text-align:center;
}
.preloader__slogan em{font-style:italic;color:var(--accent-soft);}

.preloader__meta{display:flex;align-items:center;justify-content:center;}
.preloader__bar{
  width:min(46vw, 200px);height:3px;background:rgba(247,242,232,.16);border-radius:2px;overflow:hidden;
}
.preloader__bar-fill{
  display:block;height:100%;width:0%;background:var(--accent);
}

@media (prefers-reduced-motion: reduce){
  .preloader__inner{animation:none;opacity:1;transform:none;}
}

/* ===================================================================
   HEADER — barre de navigation flottante en haut de CHAQUE page
   (logo, menu Accueil/Services/Devis/Portfolio/Contact, bouton
   "Demander un devis"). Le texte du menu utilise --ff-body.
   =================================================================== */
.header{
  position:fixed;inset-inline:0;top:0;z-index:900;
  padding:18px clamp(16px,4vw,32px) 0;
  transition:padding var(--dur-m) var(--ease), transform var(--dur-l) var(--ease);
}
.header.is-scrolled{padding-top:12px;}
.header.is-hidden{transform:translateY(-110%);}

/* ---------- Floating pill navbar ---------- */
.header__row{
  max-width:var(--container);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:9px 9px 9px clamp(20px,3vw,28px);
  border-radius:999px;
  border:1px solid var(--line-dark);
  background:rgba(247,242,232,.07);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.4);
  transition:background-color var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), padding var(--dur-m) var(--ease);
}
.header__logo{display:inline-flex;align-items:center;}
.header__logo-img{height:44px;width:auto;transition:opacity .45s var(--ease);}
.header__logo-img--dark{display:none;}

.nav__list{display:flex;align-items:center;gap:2px;}
.nav__link{
  position:relative;font-size:.92rem;font-weight:500;color:var(--text-on-dark-muted);
  padding:10px 18px;border-radius:999px;
  transition:color var(--dur-s) var(--ease), background-color var(--dur-s) var(--ease);
}
.nav__link:hover{color:var(--text-on-dark);background:rgba(247,242,232,.12);}
.nav__link.is-active{color:var(--text-on-dark);background:rgba(198,129,63,.2);}

.header__actions{display:flex;align-items:center;gap:14px;}
.header__cta{padding:12px 22px;font-size:.88rem;}

.nav-toggle{
  display:none;position:relative;width:38px;height:38px;
  align-items:center;justify-content:center;flex-direction:column;gap:6px;
}
.nav-toggle span{
  width:20px;height:1.5px;background:var(--text-on-dark);border-radius:2px;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}

/* Scrolled state (dark text on light pill) */
.header.is-scrolled .header__row{
  background:rgba(247,242,232,.88);
  border-color:var(--line-light);
  box-shadow:0 14px 32px -22px rgba(20,18,15,.28);
  padding-block:6px;
}
.header.is-scrolled .header__logo-img--light{display:none;}
.header.is-scrolled .header__logo-img--dark{display:block;}
.header.is-scrolled .nav__link{color:var(--text-on-light-muted);}
.header.is-scrolled .nav__link:hover{color:var(--text-on-light);background:rgba(20,18,15,.06);}
.header.is-scrolled .nav__link.is-active{color:var(--text-on-light);background:rgba(198,129,63,.16);}
.header.is-scrolled .nav-toggle span{background:var(--text-on-light);}

/* Pages sans photo sombre en haut (Portfolio, Services) : le header
   démarre directement en version "scrollée" (texte foncé sur fond clair)
   pour que le menu reste lisible sur le fond crème de la page. Ce bloc
   est ajouté via la classe HTML "header--static" (voir portfolio.html
   et services.html). */
.header--static .header__row{
  background:rgba(247,242,232,.88);border-color:var(--line-light);
  box-shadow:0 14px 32px -22px rgba(20,18,15,.28);
}
.header--static .header__logo-img--light{display:none;}
.header--static .header__logo-img--dark{display:block;}
.header--static .nav__link{color:var(--text-on-light-muted);}
.header--static .nav__link:hover{color:var(--text-on-light);background:rgba(20,18,15,.06);}
.header--static .nav__link.is-active{color:var(--text-on-light);background:rgba(198,129,63,.16);}
.header--static .nav-toggle span{background:var(--text-on-light);}

/* ---------- Menu mobile (plein écran, bouton ☰ en haut à droite) ---------- */
.mobile-nav{
  position:fixed;inset:0;z-index:850;
  background:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--header-h) + 20px) var(--gutter) 40px;
  transform:translateY(-100%);
  transition:transform .9s var(--ease);
}
.mobile-nav.is-open{transform:translateY(0);}
.mobile-nav ul{display:flex;flex-direction:column;gap:6px;}
.mobile-nav a{  /* [TITRE] chaque lien du menu mobile (gros texte : Accueil, Services...) */
  display:flex;align-items:baseline;gap:16px;
  font-family:var(--ff-head);font-size:clamp(2rem, 9vw, 3rem);font-weight:600;
  color:var(--text-on-dark);padding-block:10px;
  border-bottom:1px solid var(--line-dark);
}
.mobile-nav a::before{
  content:attr(data-idx);font-family:var(--ff-body);font-size:.85rem;color:var(--accent-soft);font-weight:600;
}
.mobile-nav__footer{display:flex;flex-direction:column;gap:24px;margin-top:40px;}
.mobile-nav__socials{display:flex;gap:20px;}
.mobile-nav__socials a{font-size:.85rem;color:var(--text-on-dark-muted);text-decoration:underline;text-underline-offset:4px;}

/* ===================================================================
   HERO — grand bandeau plein écran en haut de la page d'accueil, avec
   les 3 photos qui défilent en fondu (Conception / Étude / Réalisation).
   =================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--header-h) + 40px);
  overflow:clip;background:var(--ink);  /* fond de secours sombre pendant le fondu entre les photos (évite l'effet de "flash" clair) */
}

/* ---------- Diapositives (photos en fondu enchaîné plein écran) ---------- */
.hero__slides{position:absolute;inset:0;z-index:0;}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.6s var(--ease);
}
.hero__slide.is-active{opacity:1;z-index:1;}
.hero__media{position:absolute;inset:0;}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);
  will-change:transform;
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(20,18,15,.55) 0%, rgba(20,18,15,.35) 32%, rgba(20,18,15,.55) 68%, rgba(20,18,15,.94) 100%),
    linear-gradient(90deg, rgba(20,18,15,.55) 0%, rgba(20,18,15,.1) 45%);
}
.hero__content{
  position:relative;z-index:2;color:var(--text-on-dark);
  padding-bottom:56px;   /* contient tout le texte + boutons affichés par-dessus les photos */
}

/* ---------- Texte de chaque diapositive (change en fondu avec la photo) ---------- */
.hero__slide-texts{
  position:relative;
  min-height:clamp(220px, 34vw, 320px);
}
.hero__slide-text{
  position:absolute;inset:0 auto auto 0;width:100%;
  opacity:0;transform:translateY(18px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
  pointer-events:none;
}
.hero__slide-text.is-active{opacity:1;transform:none;pointer-events:auto;}

/* Petit label au-dessus du titre du Hero (ex: "CONCEPTION") */
.hero__kicker{
  font-family:var(--ff-head);font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-soft);margin-bottom:14px;
}

/* [TITRE] Le plus gros titre du site — s'affiche par-dessus chaque photo du Hero.
   Un seul des 3 est un vrai <h1> (SEO : une page ne doit avoir qu'un seul <h1>) ;
   les 2 autres sont des <p> de même classe — d'où les propriétés de police
   définies ici en dur plutôt que via la règle générique "h1,h2,h3,h4{}". */
.hero__title{
  font-family:var(--ff-head);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.08;
  font-size:clamp(2.6rem, 1.7rem + 4.2vw, 5.4rem);
  color:var(--text-on-dark);
  max-width:16ch;
}

/* [DESCRIPTION] Phrase sous le titre du Hero, sur chaque diapositive
   (ex: "Une jeune équipe mentorée..."). Pour changer sa police,
   ajoutez une ligne "font-family: ...;" dans cette règle. */
.hero__subtitle{
  margin-top:26px;font-size:clamp(1rem, .92rem + .4vw, 1.2rem);
  color:var(--text-on-dark-muted);max-width:46ch;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px;}  /* boutons sous le texte du Hero */

/* ---------- Bandeau vitré tout en bas du Hero (chiffres clés : années d'expérience, projets livrés, satisfaction...) ---------- */
.hero__panel{position:relative;z-index:2;padding-bottom:0;}
.hero__panel-inner{
  display:grid;grid-template-columns:auto 1px 1fr 1px auto;
  align-items:center;gap:clamp(18px, 3vw, 40px);
  padding:26px clamp(20px, 4vw, 40px);
  background:rgba(247,242,232,.08);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.hero-card__divider{width:1px;align-self:stretch;background:var(--line-dark);}
.hero-card{color:var(--text-on-dark);}
.hero-card--badge{display:flex;align-items:center;gap:16px;}
.hero-card__value{
  font-family:var(--ff-head);font-size:2rem;font-weight:700;color:var(--accent-soft);line-height:1;
}
.hero-card__value--sm{font-size:1.15rem;}
.hero-card__label{font-size:.82rem;color:var(--text-on-dark-muted);max-width:16ch;line-height:1.35;}
.hero-card--pillars{display:flex;gap:clamp(16px,3vw,32px);}
.hero-card--pillars > div{display:flex;align-items:center;gap:10px;font-size:.86rem;font-weight:500;}
.hero-card__icon{
  flex:none;width:30px;height:30px;border-radius:10px;
  background:rgba(198,129,63,.16);color:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
}
.hero-card__pillar-text{display:flex;flex-direction:column;gap:2px;}
.hero-card__num{font-family:var(--ff-head);color:var(--accent-soft);font-size:.78rem;font-weight:700;}
.hero-card--since{display:flex;flex-direction:column;gap:6px;text-align:right;}

.hero__scroll-cue{
  position:absolute;right:clamp(20px,4vw,56px);bottom:calc(100% + 26px);
  width:30px;height:46px;border:1.5px solid var(--line-dark);border-radius:20px;
  display:none;
}
.hero__scroll-cue span{
  position:absolute;left:50%;top:8px;width:4px;height:4px;border-radius:50%;
  background:var(--accent-soft);transform:translateX(-50%);
  animation:scrollCue 2.3s var(--ease) infinite;
}
@keyframes scrollCue{
  0%{opacity:1;top:8px;}
  70%{opacity:0;top:26px;}
  100%{opacity:0;top:8px;}
}

/* ===================================================================
   ABOUT — section "À propos" (page d'accueil uniquement) : photo à
   gauche, texte + liste de valeurs à droite.
   =================================================================== */
.about__grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:center;}
.about__media{position:relative;}
.about__media-frame{
  border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;
}
.about__media-frame img{width:100%;height:100%;object-fit:cover;}
.about__media-tag{
  position:absolute;left:-14px;bottom:-14px;
  background:var(--paper);border-radius:var(--radius-md);
  padding:18px 22px;box-shadow:0 20px 40px -14px rgba(20,18,15,.25);
  display:flex;flex-direction:column;gap:2px;font-size:.82rem;font-weight:600;color:var(--text-on-light-muted);
}
.about__media-tag span{font-family:var(--ff-head);font-size:1.5rem;color:var(--accent-2);}

/* [DESCRIPTION] Paragraphe principal de la section "À propos" */
.about__lead{
  margin-top:18px;color:var(--text-on-light-muted);font-size:1.05rem;max-width:52ch;
}
.value-list{
  display:grid;grid-template-columns:1fr;gap:26px;margin-top:40px;
}
.value-item{display:flex;gap:16px;}   /* une "valeur" de l'entreprise = icône + titre + petite description */
.value-item__icon{
  flex:none;width:46px;height:46px;border-radius:14px;
  background:var(--cream-2);color:var(--accent-2);
  display:flex;align-items:center;justify-content:center;
}
.value-item h3{font-size:1.02rem;margin-bottom:6px;}  /* [TITRE] titre de la valeur (ex: "Rigueur", "Transparence"...) */
.value-item p{color:var(--text-on-light-muted);font-size:.92rem;line-height:1.55;}  /* [DESCRIPTION] petite phrase sous chaque valeur */

/* ===================================================================
   SERVICES (ancien bloc de cartes) — N'EST PLUS UTILISÉ PAR AUCUNE PAGE
   actuellement : la page d'accueil utilise "SERVICES TEASER" et la page
   dédiée utilise "SERVICE DETAIL", tous les deux plus bas dans ce
   fichier. Conservé au cas où ; le modifier n'aura aucun effet visible
   sur le site tant qu'aucune page ne réutilise ces classes.
   =================================================================== */
.service-grid{display:grid;grid-template-columns:1fr;gap:22px;}
.service-card{
  position:relative;padding:38px 30px;border-radius:var(--radius-lg);
  background:var(--ink-2);border:1px solid var(--line-dark);
  transition:transform var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease), background-color var(--dur-m) var(--ease);
}
.service-card:hover{transform:translateY(-6px);border-color:rgba(198,129,63,.4);background:var(--ink-3);}
.service-card__index{
  font-family:var(--ff-head);font-size:.78rem;font-weight:700;color:var(--accent-soft);
  letter-spacing:.05em;
}
.service-card__icon{
  width:56px;height:56px;border-radius:16px;margin-top:20px;margin-bottom:22px;
  background:rgba(198,129,63,.14);color:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
}
.service-card h3{font-size:1.35rem;margin-bottom:12px;}
.service-card > p{color:var(--text-on-dark-muted);font-size:.95rem;line-height:1.6;margin-bottom:22px;}
.service-card__list{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line-dark);padding-top:20px;}
.service-card__list li{
  font-size:.88rem;color:var(--text-on-dark);padding-left:20px;position:relative;
}
.service-card__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:10px;height:1.5px;background:var(--accent);
}

/* ---------- Frise des étapes (bas de la page Services : "01 Étude", "02 Conception"...) ---------- */
.process{
  margin-top:clamp(50px,7vw,90px);
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--line-dark);
}
.process__step{
  display:flex;align-items:center;gap:16px;
  padding:20px 4px;border-bottom:1px solid var(--line-dark);
}
.process__step span{
  font-family:var(--ff-head);font-weight:700;color:var(--accent-soft);font-size:.85rem;
}
.process__step p{font-weight:500;font-size:.98rem;}

/* ===================================================================
   PORTFOLIO — grille de vignettes-projets sur la page portfolio.html
   (les filtres "Tous / Conception / ..." + une carte par projet).
   =================================================================== */
.portfolio__filters{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;
}
.filter-chip{
  padding:10px 20px;border-radius:var(--radius-pill);
  border:1px solid var(--line-light);font-size:.86rem;font-weight:500;
  color:var(--text-on-light-muted);
  transition:all var(--dur-s) var(--ease);
}
.filter-chip:hover{border-color:var(--accent);color:var(--text-on-light);}
.filter-chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--text-on-dark);}

.portfolio__grid{
  display:grid;grid-template-columns:1fr;gap:20px;
  min-height:200px;
}
.portfolio__loading{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:60px 0;color:var(--text-on-light-muted);font-size:.92rem;
}
.spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line-light);border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
.portfolio__empty{text-align:center;color:var(--text-on-light-muted);padding:60px 0;}

.project-card{
  display:block;position:relative;border-radius:var(--radius-md);overflow:hidden;
  aspect-ratio:4/5;cursor:pointer;color:inherit;
  opacity:0;transform:translateY(28px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
}
.project-card.is-visible{opacity:1;transform:none;}
.project-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.project-card:hover img{transform:scale(1.07);}
.project-card__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(20,18,15,.86) 100%);
}
.project-card__body{
  position:absolute;left:0;right:0;bottom:0;padding:22px;color:#fff;
}
.project-card__cat{  /* petit label catégorie sur la vignette (ex: "CONSTRUCTION") */
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-soft);margin-bottom:6px;
}
.project-card__title{font-family:var(--ff-head);font-size:1.15rem;font-weight:600;}  /* [TITRE] nom du projet affiché sur la vignette */
.project-card__expand{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  background:rgba(247,242,232,.16);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;color:#fff;
  opacity:0;transform:translateY(-6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.project-card:hover .project-card__expand{opacity:1;transform:none;}


/* ===================================================================
   DEVIS SIMULATOR — section "Devis" de la page d'accueil (aperçu +
   liste d'arguments) et fenêtre du simulateur en plusieurs étapes
   (celle-ci est réutilisée sur toutes les pages via #quote-modal).
   =================================================================== */
.quote-teaser__inner{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;}
.quote-teaser__points{display:flex;flex-direction:column;gap:14px;margin:28px 0 34px;}  /* [DESCRIPTION] liste d'arguments ("Estimation instantanée", etc.) */
.quote-teaser__points li{
  display:flex;align-items:center;gap:12px;font-size:.95rem;font-weight:500;color:var(--text-on-light-muted);
}
.quote-teaser__points svg{flex:none;color:var(--accent-2);}
.quote-teaser__points strong{color:var(--text-on-light);}

.quote-teaser__visual{display:flex;justify-content:center;}
.quote-mock{
  width:100%;max-width:340px;background:var(--ink);color:var(--text-on-dark);
  border-radius:var(--radius-lg);padding:26px;
  box-shadow:0 40px 80px -30px rgba(20,18,15,.35);
  display:flex;flex-direction:column;gap:12px;
}
.quote-mock__head{
  display:flex;align-items:center;gap:8px;font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-on-dark-muted);margin-bottom:4px;
}
.quote-mock__dot{width:6px;height:6px;border-radius:50%;background:#6fcf97;box-shadow:0 0 0 3px rgba(111,207,151,.25);}
.quote-mock__row{display:flex;justify-content:space-between;font-size:.88rem;color:var(--text-on-dark-muted);}
.quote-mock__row strong{color:var(--text-on-dark);font-weight:600;}
.quote-mock__divider{height:1px;background:var(--line-dark);margin:4px 0;}
.quote-mock__line{display:flex;justify-content:space-between;font-size:.84rem;color:var(--text-on-dark-muted);}
.quote-mock__line--strike span:first-child{text-decoration:line-through;opacity:.6;}
.quote-mock__line--strike span:last-child{color:#6fcf97;font-weight:600;}
.quote-mock__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;}
.quote-mock__total span{font-size:.84rem;color:var(--text-on-dark-muted);}
.quote-mock__total strong{font-family:var(--ff-head);font-size:1.5rem;color:var(--accent-soft);}

/* ---------- Modal shell ---------- */
.quote-modal{
  position:fixed;inset:0;z-index:1100;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease), visibility .55s var(--ease);
}
.quote-modal.is-open{opacity:1;visibility:visible;}
.quote-modal__backdrop{position:absolute;inset:0;background:rgba(12,10,8,.72);backdrop-filter:blur(4px);}
.quote-modal__panel{
  position:relative;z-index:1;width:100%;max-width:640px;
  max-height:92vh;margin-inline:auto;
  background:var(--paper);color:var(--text-on-light);
  border-radius:26px 26px 0 0;
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(40px);transition:transform .55s var(--ease);
}
.quote-modal.is-open .quote-modal__panel{transform:none;}
@media (min-width:720px){
  .quote-modal{align-items:center;padding:24px;}
  .quote-modal__panel{border-radius:26px;max-height:88vh;}
}

.quote-modal__header{display:flex;align-items:center;gap:16px;padding:20px 24px 0;}
.quote-modal__steps{flex:1;display:flex;gap:6px;}
.quote-modal__steps span{
  flex:1;height:3px;border-radius:2px;background:var(--line-light);overflow:hidden;position:relative;
}
.quote-modal__steps span::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);
}
.quote-modal__steps span.is-done::after,
.quote-modal__steps span.is-current::after{transform:scaleX(1);}
.quote-modal__close{
  flex:none;width:34px;height:34px;border-radius:50%;font-size:1.4rem;line-height:1;
  color:var(--text-on-light-muted);display:flex;align-items:center;justify-content:center;
  transition:background-color var(--dur-s) var(--ease);
}
.quote-modal__close:hover{background:var(--cream-2);}

.quote-modal__body{flex:1;overflow-y:auto;padding:22px 24px 28px;-webkit-overflow-scrolling:touch;}

.quote-modal__footer{
  border-top:1px solid var(--line-light);
  padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--paper);
}
.quote-modal__price{display:flex;flex-direction:column;gap:2px;}
.quote-modal__price-label{font-size:.72rem;color:var(--text-on-light-muted);text-transform:uppercase;letter-spacing:.05em;}
.quote-modal__price-value{font-family:var(--ff-head);font-size:1.3rem;font-weight:700;color:var(--accent-2);}
.quote-modal__nav{display:flex;gap:10px;}
.quote-modal__nav .btn{padding:12px 20px;font-size:.86rem;}
#quote-back[hidden]{display:none;}

/* ---------- Contenu de chaque étape du simulateur ---------- */
.q-step{display:flex;flex-direction:column;gap:20px;}
.q-title{font-family:var(--ff-head);font-size:clamp(1.25rem,1.1rem+.8vw,1.6rem);font-weight:700;}  /* [TITRE] titre de l'étape en cours (ex: "Quel type de projet ?") */
.q-subtitle{color:var(--text-on-light-muted);font-size:.9rem;margin-top:-12px;}  /* [DESCRIPTION] petite phrase d'aide sous le titre de l'étape */

.q-design-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.q-design-card{
  position:relative;border-radius:16px;overflow:hidden;border:1.5px solid var(--line-light);
  aspect-ratio:4/3;text-align:left;transition:border-color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.q-design-card__img{position:absolute;inset:0;display:block;}
.q-design-card__img img{width:100%;height:100%;object-fit:cover;display:block;}
.q-design-card__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,16,12,0) 40%, rgba(20,16,12,.78) 100%);
}
.q-design-card__label{
  position:relative;display:block;padding:12px 14px;color:#fff;font-weight:700;font-size:.9rem;
  align-self:flex-end;
}
.q-design-card{display:flex;flex-direction:column;justify-content:flex-end;}
.q-design-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.q-design-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(198,129,63,.22);}

.q-quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.q-quality-card{
  padding:18px 16px;border-radius:16px;border:1.5px solid var(--line-light);text-align:left;
  display:flex;flex-direction:column;gap:6px;
  transition:border-color var(--dur-s) var(--ease), background-color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.q-quality-card strong{font-size:.94rem;}
.q-quality-card p{font-size:.78rem;color:var(--text-on-light-muted);line-height:1.5;}
.q-quality-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.q-quality-card.is-selected{border-color:var(--accent);background:rgba(198,129,63,.08);}

.q-field{display:flex;flex-direction:column;gap:10px;}
.q-field__label{font-size:.86rem;font-weight:600;color:var(--text-on-light);}
.q-field__hint{font-size:.78rem;color:var(--text-on-light-muted);margin-top:-6px;}

.q-surface-input{display:flex;align-items:baseline;gap:10px;border:1.5px solid var(--line-light);border-radius:14px;padding:14px 18px;}
.q-surface-input input{
  border:0;background:none;font-family:var(--ff-head);font-size:1.5rem;font-weight:700;width:100%;color:var(--text-on-light);
}
.q-surface-input input:focus{outline:none;}
.q-surface-input span{color:var(--text-on-light-muted);font-size:.88rem;font-weight:600;}

.q-stepper-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.q-stepper{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--line-light);border-radius:14px;padding:10px 14px;}
.q-stepper__label{font-size:.8rem;font-weight:600;color:var(--text-on-light-muted);}
.q-stepper__controls{display:flex;align-items:center;gap:10px;}
.q-stepper__btn{
  width:25px;height:25px;border-radius:50%;background:var(--cream-2);color:var(--text-on-light);
  display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:700;
  transition:background-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.q-stepper__btn:hover{background:var(--accent);color:#fff;}
.q-stepper__value{font-family:var(--ff-head);font-weight:700;min-width:1.3em;text-align:center;}

.q-engage{display:flex;flex-direction:column;gap:8px;}
.q-engage__bar{display:block;height:6px;border-radius:999px;background:var(--cream-2);overflow:hidden;}
.q-engage__bar-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--accent);transition:width var(--dur-m) var(--ease);}
.q-engage p{font-size:.8rem;color:var(--text-on-light-muted);margin:0;transition:opacity var(--dur-s) var(--ease);}

.q-choice-recap{
  font-size:.85rem;color:var(--text-on-light-muted);background:var(--cream-2);
  border-radius:12px;padding:11px 14px;line-height:1.5;
}
.q-choice-recap strong{color:var(--accent-2);font-weight:700;}

.q-results{display:flex;flex-direction:column;gap:20px;}

.q-proforma{border:1.5px solid var(--line-light);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;}
.q-proforma__head{font-family:var(--ff-head);font-weight:700;font-size:.92rem;margin-bottom:6px;}
.q-proforma__row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-light);font-size:.84rem;}
.q-proforma__row:last-child{border-bottom:none;}
.q-proforma__row span{color:var(--text-on-light-muted);}
.q-proforma__row strong{color:var(--text-on-light);font-weight:600;}

.q-breakdown{border:1.5px solid var(--line-light);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px;}
.q-breakdown__row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-radius:10px;}
.q-breakdown__row--free{
  padding:8px 10px;margin:-8px -10px;
  animation:qGlowPulse 2.6s ease-in-out infinite;
}
.q-breakdown__row-label{display:flex;flex-direction:column;gap:2px;}
.q-breakdown__row-label strong{font-size:.88rem;}
.q-breakdown__row-label small{font-size:.75rem;color:var(--text-on-light-muted);}
.q-breakdown__price{font-family:var(--ff-head);font-weight:700;font-size:.98rem;white-space:nowrap;}
.q-breakdown__price--free{color:#2f7a4d;}
.q-breakdown__price--strike{text-decoration:line-through;color:var(--text-on-light-muted);font-size:.84rem;font-weight:500;margin-right:8px;}
.q-breakdown__divider{height:1px;background:var(--line-light);}
.q-breakdown__total{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;}
.q-breakdown__total strong{font-family:var(--ff-head);font-size:1.5rem;color:var(--accent-2);}

.q-offer-banner{
  background:linear-gradient(135deg, rgba(198,129,63,.16), rgba(198,129,63,.04));
  border:1.5px solid rgba(198,129,63,.4);border-radius:18px;padding:22px 24px;
  display:flex;gap:16px;align-items:flex-start;
  animation:qOfferPop .55s cubic-bezier(.22,1,.36,1) both;
}
.q-offer-banner__icon{
  flex:none;color:var(--accent-2);width:44px;height:44px;border-radius:50%;
  background:rgba(198,129,63,.16);display:flex;align-items:center;justify-content:center;
  animation:qIconBounce 2.4s ease-in-out infinite;
}
.q-offer-banner strong{display:block;font-size:1rem;margin-bottom:5px;}
.q-offer-banner p{font-size:.85rem;color:var(--text-on-light-muted);line-height:1.5;}

.q-trust-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.q-trust-list li{font-size:.8rem;color:var(--text-on-light-muted);padding-left:22px;position:relative;}
.q-trust-list li::before{content:"\2713";position:absolute;left:0;top:0;color:#2f7a4d;font-weight:700;}

@keyframes qOfferPop{
  0%{opacity:0;transform:scale(.94) translateY(8px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
@keyframes qIconBounce{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-3px) scale(1.07);}
}
@keyframes qGlowPulse{
  0%,100%{background-color:rgba(47,122,77,0);}
  50%{background-color:rgba(47,122,77,.08);}
}
@media (prefers-reduced-motion: reduce){
  .q-offer-banner,.q-offer-banner__icon,.q-breakdown__row--free{animation:none;}
}

.q-form{display:flex;flex-direction:column;gap:20px;}

.q-rdv{
  border:1.5px solid rgba(198,129,63,.4);border-radius:16px;padding:18px 20px;
  background:linear-gradient(135deg, rgba(198,129,63,.1), rgba(198,129,63,.02));
  display:flex;flex-direction:column;gap:10px;
}
.q-rdv__title{display:flex;align-items:center;gap:8px;font-family:var(--ff-head);font-size:.98rem;font-weight:700;color:var(--text-on-light);}
.q-rdv__icon{color:var(--accent-2);flex:none;}
.q-rdv__desc{font-size:.82rem;color:var(--text-on-light-muted);line-height:1.5;}
.q-rdv__fields{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:480px){.q-rdv__fields{grid-template-columns:1fr 1fr;}}

.q-contact-fields{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:520px){.q-contact-fields{grid-template-columns:1fr 1fr;}}
.q-contact-fields .form-field--full{grid-column:1/-1;}

.q-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:16px 0 24px;}
.q-success__icon{
  width:54px;height:54px;border-radius:50%;background:rgba(198,129,63,.14);color:var(--accent-2);
  display:flex;align-items:center;justify-content:center;
}
.q-success h3{font-family:var(--ff-head);font-size:1.25rem;}
.q-success p{color:var(--text-on-light-muted);font-size:.9rem;max-width:44ch;}

@media (min-width:900px){
  .quote-teaser__inner{grid-template-columns:1.15fr .85fr;}
}
@media (max-width:420px){
  .q-design-grid,.q-quality-grid{grid-template-columns:1fr;}
}

/* ===================================================================
   CTA BANNER
   =================================================================== */
.cta-banner{background:var(--cream-2);padding-block:clamp(56px,8vw,100px);}
.cta-banner__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
}
.cta-banner h2{font-size:clamp(1.7rem,1.3rem+2vw,2.6rem);max-width:16ch;}  /* [TITRE] titre du bandeau "Un projet en tête ?" (bas de chaque page) */

/* ===================================================================
   CONTACT — section "Contact" de la page d'accueil : coordonnées à
   gauche, formulaire à droite (le formulaire utilise --ff-body, comme
   tout le texte du site, via la règle "input,textarea,select" du reset
   tout en haut du fichier).
   =================================================================== */
.contact__grid{display:grid;grid-template-columns:1fr;gap:56px;}
.contact-list{display:flex;flex-direction:column;gap:20px;margin-top:34px;}
.contact-list li{display:flex;gap:16px;align-items:flex-start;}
.contact-list__icon{
  flex:none;width:42px;height:42px;border-radius:12px;background:var(--cream-2);color:var(--accent-2);
  display:flex;align-items:center;justify-content:center;
}
.contact-list strong{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-on-light-muted);margin-bottom:2px;}
.contact-list a,.contact-list span{font-size:1rem;font-weight:500;}
.contact-socials{display:flex;gap:12px;margin-top:34px;}
.contact-socials a{
  width:42px;height:42px;border-radius:50%;background:var(--cream-2);color:var(--text-on-light);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.contact-socials a:hover{background:var(--ink);color:var(--cream);transform:translateY(-3px);}

.contact-form{
  background:var(--paper);border:1px solid var(--line-light);border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,44px);display:flex;flex-direction:column;gap:20px;
  box-shadow:0 30px 60px -30px rgba(20,18,15,.18);
}
.form-row{display:grid;grid-template-columns:1fr;gap:20px;}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field label{font-size:.82rem;font-weight:600;color:var(--text-on-light-muted);}
.form-field input,.form-field textarea,.form-field select{
  border:1px solid var(--line-light);border-radius:12px;padding:13px 16px;
  background:var(--cream);color:var(--text-on-light);
  transition:border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.form-field textarea{resize:vertical;min-height:110px;}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(198,129,63,.15);
}
.form-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2317140f' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;}
.form-field input.is-invalid,.form-field select.is-invalid{
  border-color:#c0483c;box-shadow:0 0 0 4px rgba(192,72,60,.14);
  animation:fieldShake .35s var(--ease);
}
@keyframes fieldShake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.contact-form .btn{margin-top:6px;}
.contact-form__status{
  font-size:.88rem;text-align:center;min-height:1.2em;
}
.contact-form__status.is-success{color:#2f7a4d;}
.contact-form__status.is-error{color:#c0483c;}

/* ===================================================================
   FOOTER — pied de page, identique sur toutes les pages.
   =================================================================== */
.footer{background:var(--ink);color:var(--text-on-dark);padding-top:clamp(56px,8vw,90px);}
.footer__top{
  display:grid;grid-template-columns:1fr;gap:44px;
  padding-bottom:56px;border-bottom:1px solid var(--line-dark);
}
.footer__logo{height:32px;width:auto;margin-bottom:18px;}
.footer__brand p{color:var(--text-on-dark-muted);font-size:.92rem;max-width:34ch;line-height:1.6;}  /* [DESCRIPTION] phrase sous le logo, dans le footer */
.footer__socials{display:flex;gap:10px;margin-top:22px;}
.footer__socials a{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;color:var(--text-on-dark-muted);
  transition:border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.footer__socials a:hover{border-color:var(--accent);color:var(--accent-soft);}
.footer__col h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-on-dark-muted);margin-bottom:18px;font-weight:600;}
.footer__col ul{display:flex;flex-direction:column;gap:12px;}
.footer__col a{font-size:.94rem;color:var(--text-on-dark);opacity:.86;transition:opacity var(--dur-s) var(--ease);}
.footer__col a:hover{opacity:1;color:var(--accent-soft);}
.footer__col li{font-size:.94rem;color:var(--text-on-dark-muted);}

.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding-block:24px;font-size:.82rem;color:var(--text-on-dark-muted);
}

.back-to-top{
  position:fixed;right:20px;bottom:20px;z-index:400;
  width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
  box-shadow:0 14px 28px -12px rgba(20,18,15,.4);
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none;}

/* ===================================================================
   REVEAL ANIMATIONS — animation d'apparition en fondu + léger glissement
   vers le haut, déclenchée quand un élément marqué "data-reveal" entre
   dans l'écran au scroll (géré en JS dans main.js). Pas de texte ici,
   uniquement de la mise en scène.
   =================================================================== */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
  transition-delay:calc(var(--reveal-delay, 0) * 130ms);
}
[data-reveal].is-visible{opacity:1;transform:none;}
[data-reveal-fx="scale"]{transform:scale(.94);}
[data-reveal-fx="scale"].is-visible{transform:none;}

/* ===================================================================
   BUTTON — outline variant (light backgrounds)
   =================================================================== */
.btn--outline{border:1.5px solid var(--line-light);color:var(--text-on-light);}
.btn--outline:hover{background:var(--cream-2);border-color:var(--ink);transform:translateY(-2px);}

/* ===================================================================
   PORTFOLIO PREVIEW — bandeau de photos qui défile automatiquement,
   juste sous le Hero de la page d'accueil ("5 projets clés"). Clic sur
   une photo → ouvre la fiche du projet (projet.html).
   =================================================================== */
.portfolio-preview{overflow:hidden;}
.portfolio-preview__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;
  margin-bottom:clamp(30px,5vw,48px);
}
.portfolio-preview__head .section-title{margin:0;}
.portfolio-preview__track{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.portfolio-preview__marquee{
  display:flex;gap:20px;width:max-content;
  animation:pfScroll 42s linear infinite;
}
.portfolio-preview__track:hover .portfolio-preview__marquee{animation-play-state:paused;}
@keyframes pfScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.pf-card{
  position:relative;flex:none;width:min(78vw,340px);aspect-ratio:4/5;
  border-radius:var(--radius-md);overflow:hidden;display:block;color:inherit;
}
.pf-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.pf-card:hover img{transform:scale(1.06);}
.pf-card__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(20,18,15,.88) 100%);}
.pf-card__body{position:absolute;left:0;right:0;bottom:0;padding:20px;color:#fff;}
.pf-card__cat{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-soft);margin-bottom:6px;
}
.pf-card__title{font-family:var(--ff-head);font-size:1.08rem;font-weight:600;}  /* [TITRE] nom du projet, sur la vignette du bandeau défilant */
.pf-card__loc{display:block;font-size:.78rem;color:rgba(247,242,232,.72);margin-top:2px;}  /* [DESCRIPTION] lieu du projet, petit texte sous le titre */
@media (prefers-reduced-motion: reduce){
  .portfolio-preview__marquee{animation:none;flex-wrap:wrap;}
}

/* ===================================================================
   SERVICES TEASER — les 3 cartes "Conception / Étude / Réalisation"
   sur la page d'accueil (aperçu qui renvoie vers services.html).
   =================================================================== */
.services-teaser{background:var(--ink);color:var(--text-on-dark);}
.services-teaser__grid{display:grid;grid-template-columns:1fr;gap:20px;}
.services-teaser__pillar{
  padding:30px 26px;border-radius:var(--radius-lg);background:var(--ink-2);border:1px solid var(--line-dark);
  transition:transform var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease), background-color var(--dur-m) var(--ease);
}
.services-teaser__pillar:hover{transform:translateY(-6px);border-color:rgba(198,129,63,.4);background:var(--ink-3);}
.services-teaser__icon{
  width:50px;height:50px;border-radius:15px;margin-bottom:20px;
  background:rgba(198,129,63,.14);color:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
}
.services-teaser__pillar h3{font-size:1.18rem;margin-bottom:8px;}
.services-teaser__pillar p{color:var(--text-on-dark-muted);font-size:.92rem;line-height:1.6;}
.services-teaser__foot{margin-top:clamp(34px,5vw,50px);text-align:center;}

/* ===================================================================
   PAGE BANNER (Portfolio / Services standalone pages)
   =================================================================== */
.page-banner{padding:clamp(140px,20vw,190px) 0 clamp(50px,7vw,76px);}
.page-banner h1{
  font-family:var(--ff-head);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(2.3rem, 1.7rem + 3vw, 4rem);max-width:20ch;
}
.page-banner p{
  margin-top:18px;color:var(--text-on-light-muted);
  font-size:clamp(1rem, .95rem + .3vw, 1.15rem);max-width:58ch;
}
.page-banner__meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;}
.page-banner__stat{display:flex;flex-direction:column;}
.page-banner__stat strong{font-family:var(--ff-head);font-size:1.4rem;color:var(--accent-2);}
.page-banner__stat span{font-size:.78rem;color:var(--text-on-light-muted);}

/* ===================================================================
   PROJECT PAGE (dedicated page per portfolio project)
   =================================================================== */

/* ---------- Hero: full-height key photo, title + description overlaid ---------- */
.pg-hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--header-h) + 40px);
  overflow:clip;background:var(--ink);
}
.pg-hero__media{position:absolute;inset:0;z-index:0;}
.pg-hero__media img{width:100%;height:100%;object-fit:cover;display:block;}
.pg-hero__scrim{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg, rgba(20,18,15,.5) 0%, rgba(20,18,15,.3) 30%, rgba(20,18,15,.5) 65%, rgba(20,18,15,.92) 100%),
    linear-gradient(90deg, rgba(20,18,15,.5) 0%, rgba(20,18,15,.08) 45%);
}
.pg-hero__content{position:relative;z-index:2;color:var(--text-on-dark);padding-bottom:36px;}
.pg-hero__cat{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-soft);margin-bottom:14px;
}
.pg-hero__content h1{
  font-family:var(--ff-head);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);max-width:22ch;color:var(--text-on-dark);
}
.pg-hero__loc{
  display:flex;align-items:center;gap:6px;color:var(--text-on-dark-muted);font-size:.95rem;margin-top:14px;
}
.pg-hero__desc{color:var(--text-on-dark-muted);font-size:1.02rem;line-height:1.75;margin-top:18px;max-width:65ch;}

.pg-hero__stats{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,32px);
  margin-top:32px;padding:22px clamp(20px,4vw,32px);
  background:rgba(247,242,232,.08);border:1px solid var(--line-dark);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
}
.pg-stat{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:500;color:var(--text-on-dark);}
.pg-stat__icon{
  flex:none;width:34px;height:34px;border-radius:11px;
  background:rgba(198,129,63,.18);color:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
}
.pg-stat__value{white-space:nowrap;}

/* ---------- Gallery grid (large, clickable cells) ---------- */
.pg-grid{
  display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px;
}
.pg-grid__item{
  position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:zoom-in;
  aspect-ratio:4/3;
  opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.pg-grid__item.is-visible{opacity:1;transform:none;}
.pg-grid__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease);}
.pg-grid__item:hover img{transform:scale(1.06);}
.pg-grid__item::after{
  content:"";position:absolute;inset:0;background:rgba(20,18,15,0);transition:background-color var(--dur-s) var(--ease);
}
.pg-grid__item:hover::after{background:rgba(20,18,15,.1);}
.pg-grid__item--wide{grid-column:1/-1;}

.pg-info__back{margin-top:40px;}

/* ---------- Zoom overlay (with prev/next through the whole gallery) ---------- */
.pg-zoom{
  position:fixed;inset:0;z-index:1100;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(12,10,8,.96);
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s var(--ease);
}
.pg-zoom.is-open{opacity:1;visibility:visible;}
.pg-zoom img{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;
  transform:scale(.96);transition:transform .45s var(--ease);
}
.pg-zoom.is-open img{transform:none;}
.pg-zoom__close{
  position:absolute;top:20px;right:20px;z-index:2;width:44px;height:44px;border-radius:50%;
  color:#fff;font-size:1.8rem;line-height:1;background:rgba(247,242,232,.12);
  display:flex;align-items:center;justify-content:center;
}
.pg-zoom__close:hover{background:rgba(247,242,232,.22);}
.pg-zoom__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;color:#fff;font-size:1.8rem;
  background:rgba(247,242,232,.1);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
}
.pg-zoom__arrow:hover{background:rgba(247,242,232,.2);}
.pg-zoom__arrow--prev{left:clamp(10px,3vw,28px);}
.pg-zoom__arrow--next{right:clamp(10px,3vw,28px);}

/* ===================================================================
   SERVICE DETAIL (Services standalone page)
   =================================================================== */
.service-detail{padding-block:clamp(46px,7vw,84px);border-top:1px solid var(--line-light);}
.service-detail:first-of-type{border-top:0;padding-top:0;}
.service-detail__grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;}
.service-detail__visual{
  aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:var(--cream-2);
  display:flex;align-items:center;justify-content:center;color:var(--accent-2);
}
.service-detail__visual svg{width:34%;height:34%;}
.service-detail__index{
  font-family:var(--ff-head);font-weight:700;color:var(--accent-2);font-size:.85rem;letter-spacing:.08em;margin-bottom:10px;
}
.service-detail h2{font-size:clamp(1.55rem,1.25rem+1.2vw,2.3rem);margin-bottom:16px;}
.service-detail__lead{color:var(--text-on-light-muted);font-size:1.02rem;line-height:1.7;margin-bottom:22px;}
.service-detail__list{display:grid;grid-template-columns:1fr;gap:18px;}
.service-detail__list li{padding-left:22px;position:relative;}
.service-detail__list li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:1.5px;background:var(--accent);}
.service-detail__list strong{display:block;font-size:.96rem;font-weight:600;margin-bottom:3px;}
.service-detail__list span{display:block;font-size:.86rem;color:var(--text-on-light-muted);line-height:1.55;}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (min-width:640px){
  .form-row{grid-template-columns:1fr 1fr;}
}

@media (min-width:820px){
  .pg-grid{grid-template-columns:repeat(2,1fr);}
  .about__grid{grid-template-columns:.85fr 1fr;}
  .value-list{grid-template-columns:1fr 1fr;}
  .service-grid{grid-template-columns:repeat(3,1fr);}
  .portfolio__grid{grid-template-columns:repeat(3,1fr);}
  .contact__grid{grid-template-columns:.9fr 1.1fr;}
  .process{grid-template-columns:repeat(5,1fr);border-top:0;border-bottom:1px solid var(--line-dark);}
  .process__step{flex-direction:column;align-items:flex-start;gap:10px;border-bottom:0;border-right:1px solid var(--line-dark);padding:0 20px 24px 0;}
  .process__step:last-child{border-right:0;}
  .footer__top{grid-template-columns:1.4fr .8fr .8fr .8fr;}
  .hero__scroll-cue{display:block;}
  .services-teaser__grid{grid-template-columns:repeat(3,1fr);}
  .service-detail__grid{grid-template-columns:1fr 1fr;}
  .service-detail--reverse .service-detail__grid{direction:rtl;}
  .service-detail--reverse .service-detail__grid > *{direction:ltr;}
}

@media (min-width:900px){
  .pg-grid__item{aspect-ratio:16/10;}
}

@media (min-width:1024px){
  .nav-toggle{display:none;}
}

@media (max-width:1023px){
  .nav,.header__cta{display:none;}
  .nav-toggle{display:inline-flex;}
  .header__row{justify-content:space-between;}
  .hero__panel-inner{grid-template-columns:1fr;gap:20px;}
  .hero-card__divider{width:100%;height:1px;}
  .hero-card--pillars{justify-content:space-between;}
  .hero-card--since{text-align:left;}
}

@media (max-width:819px){
  .portfolio__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  /* Fill the full device height as before; drop the extra 1.08 parallax
     zoom on mobile only (it's not needed without scroll-driven parallax
     room) so slightly more of each photo — and its people — stays in frame.
     Each slide's object-position (set inline per image) keeps the subjects
     centred in the visible crop. */
  .hero__media img{transform:none !important;}
}
@media (max-width:520px){
  .portfolio__grid{grid-template-columns:1fr;}
  .cta-banner__inner{flex-direction:column;align-items:flex-start;}
  .pg-zoom__arrow{width:40px;height:40px;font-size:1.5rem;}
  .quote-modal__footer{flex-direction:column;align-items:stretch;gap:12px;}
  .quote-modal__nav{justify-content:stretch;}
  .quote-modal__nav .btn{flex:1;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important;}
  .hero__media img{transform:none !important;}
}