/* =================================================================
   ITEXPERIENCE - modeles.css
   La page des quatorze modèles (modeles.html), habillée le 18/09/2026 dans
   l'identité de l'accueil. css/studio.css est chargée AVANT cette feuille
   (palette, polices, en-tête, boutons, pied de page, barre d'action basse) ;
   ici, la mise en forme des composants propres à cette page. Leur balisage et
   les crochets de js/main.js (.reveal, .counter, .gfilter, .gcard, .field,
   #formSuccess) n'ont pas changé : seule leur apparence est nouvelle.
   Aucune couleur en dur : tout passe par les variables du bloc PALETTE de
   studio.css. Les seules couleurs écrites dans la page sont celles des
   modèles eux-mêmes (pastilles de palette, fond de secours des vignettes).
   ================================================================= */

/* --- 1. Communs de la page ---------------------------------------------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.m-chapitre{padding-block:clamp(2.4rem,6vw,5.2rem);}
/* Lien d'évitement : le début du contenu s'arrête sous l'en-tête collant, pas derrière lui. */
main[id]{scroll-margin-top:var(--entete-h);}
/* Titres de section : interligne un peu plus ouvert que .geant (1,1 depuis le 18/09/2026, .99
   avant). Les accents des capitales de Big Shoulders montent haut : à 1,05 encore, le circonflexe
   de « VÔTRE » touchait le S de la ligne du dessus. Même règle pour les intitulés qui passent sur
   deux lignes. */
.section-head .geant,.why__intro .geant,.contact__intro .geant{line-height:1.12;}
.section-head{max-width:62rem;}
.section-head .chapo,.why__intro .chapo,.contact__intro .chapo{max-width:58ch;}

/* Apparition au défilement, pilotée par js/main.js (IntersectionObserver, classe .is-visible).
   Spécificité d'UNE classe, comme dans l'ancienne feuille : les cartes de la galerie portent
   aussi .reveal et déclarent leur propre transition, qui doit l'emporter. Sans JavaScript, la
   classe js n'est jamais posée sur <html> et rien n'est masqué. */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1);}
.reveal.is-visible{opacity:1;transform:none;}
html:not(.js) .reveal{opacity:1;transform:none;}
.values__grid .value-card:nth-child(2),.steps .step:nth-child(2){transition-delay:.06s;}
.values__grid .value-card:nth-child(3),.steps .step:nth-child(3){transition-delay:.12s;}
.values__grid .value-card:nth-child(4){transition-delay:.18s;}

/* --- 2. Premier écran, sur l'encre --------------------------------------- */
.m-hero{padding-block:clamp(2rem,5vw,4.4rem) clamp(2.2rem,4.8vw,4rem);}
.m-hero .hero__oeil{margin-bottom:clamp(1rem,2.2vw,1.5rem);}
/* Le point du surtitre (balise du dictionnaire, clé hero.eyebrow) : un point laiton qui respire. */
.pulse-dot{flex:none;align-self:flex-start;margin-top:.42em;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pouls 2.4s ease-out infinite;}
@keyframes pouls{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55);}
  70%{box-shadow:0 0 0 10px rgba(var(--accent-rgb),0);}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);}
}
.m-hero__titre{font-size:clamp(2.8rem,8vw,7.4rem);line-height:1.02;letter-spacing:-.012em;max-width:15ch;}
/* « ultra modernes. » : le contrepoint en italique laiton, comme « déjà » sur l'accueil. La classe
   vient du dictionnaire (clé hero.title) et garde son nom d'origine. */
.m-hero__titre .gradient-text{
  font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:.8em;color:var(--accent);padding-inline:.04em;
}
.m-hero__chapo{margin-top:clamp(1rem,2vw,1.4rem);max-width:58ch;font-size:clamp(1.05rem,1.45vw,1.25rem);color:var(--texte-2);}
.m-hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.4rem,2.8vw,2.2rem);}
/* Les chiffres : la rangée de faits du premier écran de l'accueil. Les valeurs sont écrites dans le
   HTML (un robot lit « 12 », pas « 0 ») ; js/main.js les recompte à l'arrivée à l'écran. */
.m-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(1.8rem,3.6vw,3rem) 0 0;
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
}
.m-stat{padding:.95rem 1.2rem;border-left:1px solid var(--ligne);}
.m-stat:first-child{border-left:0;padding-left:0;}
.m-stat dt{font-family:var(--f-titre);font-weight:800;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.9;color:var(--texte);font-variant-numeric:tabular-nums;}
.m-stat .unit{color:var(--accent);margin-left:.04em;}
.m-stat dd{margin:.45rem 0 0;font-size:.95rem;line-height:1.4;color:var(--texte-2);}

/* --- 3. Nos engagements, sur la chaux ------------------------------------ */
.values__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2.2rem);}
.value-card{border-top:2px solid var(--ligne-forte);padding-top:1.1rem;}
.value-card__icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--ligne-forte);color:var(--accent-ici);}
.value-card__title{margin-top:.9rem;font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.12;}
.value-card__text{margin-top:.5rem;font-size:1rem;color:var(--texte-2);}

/* --- 4. La galerie des quatorze, sur l'encre ------------------------------
   Chaque carte est un cadre de navigateur, comme les modèles de l'accueil : barre à pastilles et
   adresse, capture, puis le nom et le métier. Au survol, un voile montre les points forts et la
   palette du modèle. La barre de filtres reste collée sous l'en-tête : studio.css pose
   overflow:hidden sur les chapitres, ce qui fige un sticky, d'où overflow:clip ici. */
.gallery{overflow:clip;}
.gfilters{
  position:sticky;top:calc(var(--entete-h) + 10px);z-index:20;
  display:flex;gap:.3rem;width:fit-content;max-width:100%;
  margin:clamp(1.4rem,2.8vw,2.2rem) 0 clamp(1.2rem,2.4vw,1.8rem);padding:.3rem;
  background:rgba(var(--encre-rgb),.9);border:1px solid var(--ligne);border-radius:99px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.gfilters::-webkit-scrollbar{display:none;}
.gfilter{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;white-space:nowrap;
  min-height:44px;padding:.5rem 1rem;border:0;border-radius:99px;background:transparent;
  font-weight:700;font-size:.95rem;line-height:1;color:var(--texte-2);cursor:pointer;
  transition:color .18s,background-color .18s;
}
.gfilter:hover{color:var(--texte);background:rgba(var(--sur-encre-rgb),.08);}
/* Focus à l'intérieur de la pastille : l'overflow de la barre rognerait un contour extérieur. */
.gfilter:focus-visible{outline:2px solid var(--accent-action);outline-offset:-2px;}
.gfilter__count{
  font-size:.72rem;font-weight:800;line-height:1;padding:.24rem .46rem;border-radius:99px;
  background:rgba(var(--sur-encre-rgb),.1);color:var(--texte-3);transition:background-color .18s,color .18s;
}
.gfilter.is-active{background:var(--btn);color:var(--btn-texte);}
.gfilter.is-active .gfilter__count{background:rgba(var(--encre-rgb),.18);color:var(--btn-texte);}
/* Sur la pastille active, un contour laiton se confondait avec son fond (relecture du 18/09/2026) :
   il prend l'encre du texte du bouton, et rentre de quelques pixels pour se lire comme un anneau
   dans le laiton plutôt que comme un bord confondu avec la barre sombre. */
.gfilter.is-active:focus-visible{outline-color:var(--btn-texte);outline-offset:-5px;}

.gallery__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.6rem);}
.gallery__grid .gcard{
  position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--fond-2);border:1px solid var(--ligne-forte);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--ombre-cadre);
  /* opacity et transform servent à la fois à l'apparition et au filtrage */
  transition:opacity .38s cubic-bezier(.4,0,.2,1),transform .38s cubic-bezier(.4,0,.2,1),border-color .22s,box-shadow .22s;
}
.gallery__grid .gcard:hover{transform:translateY(-4px);border-color:var(--accent-ici);box-shadow:var(--ombre-cadre-accent);}
.gallery__grid .gcard.is-leaving{opacity:0;transform:scale(.96);pointer-events:none;}
.gallery__grid .gcard.is-hidden{display:none;}
.gcard__chrome{display:flex;align-items:center;gap:.5rem;padding:.36rem .6rem;background:var(--fond-3);border-bottom:1px solid var(--ligne);}
.gcard__dots{display:inline-flex;gap:4px;flex:none;}
.gcard__dots i{width:7px;height:7px;border-radius:50%;display:block;background:var(--texte-3);opacity:.7;}
.gcard__url{
  flex:1;min-width:0;padding:.1rem .5rem;border-radius:99px;background:var(--fond);
  font-size:.66rem;color:var(--texte-3);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gcard__media{position:relative;aspect-ratio:1280/812;overflow:hidden;background:var(--fond-3);}
.gcard__fallback{
  position:absolute;inset:0;z-index:0;display:grid;place-items:center;padding:1rem;text-align:center;
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:1.3rem;
}
.gcard__img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s cubic-bezier(.16,1,.3,1);}
.gcard:hover .gcard__img{transform:scale(1.045);}
.gcard__veil{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  gap:.5rem;padding:.8rem;opacity:0;transition:opacity .3s;
  background:linear-gradient(180deg,rgba(var(--encre-rgb),.08) 0%,rgba(var(--encre-rgb),.9) 84%);
}
.gcard:hover .gcard__veil,.gcard:focus-visible .gcard__veil{opacity:1;}
.gcard__cta{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-30%);
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  padding:.55rem 1rem;border-radius:var(--r);background:var(--accent-action);color:var(--sur-accent);
  font-weight:700;font-size:.88rem;transition:transform .3s;
}
.gcard:hover .gcard__cta,.gcard:focus-visible .gcard__cta{transform:translate(-50%,-50%);}
.gcard__tags{display:flex;flex-wrap:wrap;gap:.3rem;}
.gcard__tag{
  padding:.3rem .55rem;border-radius:99px;font-size:.72rem;font-weight:600;line-height:1;white-space:nowrap;
  color:var(--sur-encre);background:rgba(var(--sur-encre-rgb),.1);border:1px solid rgba(var(--sur-encre-rgb),.22);
}
.gcard__swatches{display:flex;gap:.35rem;}
.gcard__swatch{width:14px;height:14px;border-radius:50%;background:var(--c);border:1px solid rgba(var(--sur-encre-rgb),.4);}
.gcard__info{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.85rem .9rem .95rem;}
.gcard__meta{min-width:0;}
.gcard__name{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:1.45rem;line-height:1.1;letter-spacing:.005em;color:var(--texte);}
.gcard__sector{display:block;margin-top:.34rem;font-size:.75rem;font-weight:700;letter-spacing:.12em;line-height:1.35;text-transform:uppercase;color:var(--accent-ici);}
.gcard__arrow{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--ligne-forte);color:var(--texte-2);
  transition:background-color .2s,color .2s,border-color .2s,transform .2s;
}
.gcard:hover .gcard__arrow,.gcard:focus-visible .gcard__arrow{background:var(--btn);border-color:transparent;color:var(--btn-texte);transform:translateX(2px);}

/* --- 5. La méthode, sur la chaux teintée --------------------------------- */
.steps{list-style:none;padding:0;margin:clamp(1.4rem,2.8vw,2.2rem) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.1rem,2.2vw,2rem);}
.step{position:relative;padding-top:1.1rem;border-top:2px solid var(--ligne-forte);}
.step__num{display:block;font-family:var(--f-titre);font-weight:800;font-size:clamp(3.2rem,6vw,5rem);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--texte-3);transition:-webkit-text-stroke-color .25s;}
.step:hover .step__num{-webkit-text-stroke-color:var(--accent-ici);}
.step__icon{position:absolute;top:1.35rem;right:0;color:var(--accent-ici);}
.step__title{margin-top:.85rem;font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.12;}
.step__text{margin-top:.6rem;font-size:1rem;color:var(--texte-2);max-width:40ch;}

/* --- 6. Pourquoi me choisir, sur la chaux --------------------------------
   L'argument à gauche (il reste en vue pendant qu'on parcourt les six points), les six points à
   droite. Même contournement du overflow des chapitres que pour la galerie. */
.why{overflow:clip;}
.why__inner{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(1.6rem,4vw,4rem);align-items:start;}
.why__intro{position:sticky;top:calc(var(--entete-h) + 1.5rem);}
.why__intro .btn{margin-top:clamp(1.2rem,2.4vw,1.8rem);}
.why__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,2.2vw,2rem) clamp(1.2rem,2.4vw,2.2rem);}
.benefit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;padding-top:1rem;border-top:1px solid var(--ligne-forte);}
.benefit__icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--btn);color:var(--btn-texte);}
.benefit__title{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:1.4rem;line-height:1.12;}
.benefit__text{margin-top:.4rem;font-size:1rem;color:var(--texte-2);}

/* --- 7. Contact, sur l'encre ----------------------------------------------
   La plaque .form vient de studio.css (le formulaire de l'accueil). Les champs gardent le balisage
   que valide js/main.js (.field, .is-invalid, [data-error-for]) avec le dessin des .champ de
   l'accueil. */
.contact__inner{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(1.4rem,3.4vw,3rem);align-items:start;}
.contact__list{margin-top:clamp(1.1rem,2.2vw,1.6rem);padding-top:1rem;border-top:1px solid var(--ligne);display:grid;gap:.7rem;}
.contact__item{display:flex;align-items:center;gap:.8rem;color:var(--texte-2);}
.contact__ico{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--ligne-forte);color:var(--accent-ici);}
.contact__item a{color:var(--texte);font-weight:600;text-decoration:none;box-shadow:inset 0 -1px 0 var(--ligne-forte);}
.contact__item a:hover{box-shadow:inset 0 -2px 0 var(--accent-ici);}
.contact .form{border-top:2px solid var(--accent-action);color-scheme:dark;}
.field{display:grid;gap:.35rem;}
.field label{font-size:.86rem;font-weight:700;letter-spacing:.02em;color:var(--texte-2);}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:.8rem .95rem;
  background:var(--fond);border:1px solid var(--ligne-forte);border-radius:var(--r);color:var(--texte);
  transition:border-color .18s,box-shadow .18s;
}
.field textarea{min-height:120px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--texte-3);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--btn);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.32);}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--alerte);}
.field__error{font-size:.88rem;line-height:1.45;color:var(--alerte);}
.field__error:empty{display:none;}
.select-wrap{position:relative;}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer;}
.select-wrap__chevron{position:absolute;right:.95rem;top:50%;transform:translateY(-50%);color:var(--texte-3);pointer-events:none;}
.form__success{display:flex;align-items:flex-start;gap:.7rem;padding:.9rem 1rem;border:1px solid var(--btn);border-radius:var(--r);background:rgba(var(--accent-rgb),.14);font-size:.98rem;color:var(--texte);}
.form__success[hidden]{display:none;}
.form__success svg{flex:none;margin-top:.1rem;color:var(--accent);}

/* --- 8. Adaptations ----------------------------------------------------- */
@media (max-width:1180px){
  .gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1000px){
  .values__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:minmax(0,1fr);}
  .why__inner,.contact__inner{grid-template-columns:minmax(0,1fr);}
  .why__intro{position:static;}
}
@media (max-width:820px){
  .m-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .m-stat{border-left:0;padding-left:0;border-top:1px solid var(--ligne);}
  .m-stat:nth-child(-n+2){border-top:0;}
  .m-stat:nth-child(odd){border-right:1px solid var(--ligne);padding-right:1rem;}
  .m-stat:nth-child(even){padding-left:1rem;}
  .gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .why__grid{grid-template-columns:minmax(0,1fr);}
  /* Téléphone : le texte courant ne descend jamais sous 16 px (règle de l'accueil). */
  .m-stat dd,.value-card__text,.step__text,.benefit__text,.gfilter,.field label,.form__success,.contact__item{font-size:1rem;}
}
@media (max-width:560px){
  .m-hero__actions .btn{flex:1 1 100%;}
  .values__grid{grid-template-columns:minmax(0,1fr);}
  .gallery__grid{grid-template-columns:minmax(0,1fr);}
  .gfilters{margin-inline:calc(-1 * var(--gout));max-width:none;width:auto;border-radius:0;border-inline:0;padding-inline:var(--gout);}
}
@media (prefers-reduced-motion:reduce){
  .reveal,html.js .reveal{opacity:1;transform:none;transition:none;}
  .pulse-dot{animation:none;}
}