/* pages.css — pages intérieures du site Trifecta Médias (générées par build_site.py).
   Source de vérité : C:\jarvis\workspace\trifecta-site-complet-20261007\css\pages.css
   Copié tel quel dans maquette\css\pages.css à chaque construction — ne jamais éditer la copie.
   Hors @layer : ces règles priment sur les couches de base.css (reset < tokens < base < layout < components).
   Palette, typographie et boutons : uniquement les variables existantes (base.css). */

/* ============================== FIL D'ARIANE ============================== */
.breadcrumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;
  font-family:var(--font-body);font-size:14px;color:var(--muted);
}
.breadcrumb li+li::before{content:"›";margin:0 10px;color:var(--muted-dark)}
.breadcrumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.breadcrumb a:hover{color:var(--ink-900);border-color:var(--orange)}
.breadcrumb [aria-current="page"]{color:var(--ink-900);font-weight:500}

/* ============================== HERO DE PAGE ============================== */
.page-hero{padding-block:clamp(44px,7vw,96px) clamp(36px,5vw,64px)}
.page-title{
  margin-top:clamp(18px,3vw,30px);
  font-family:var(--font-display);font-weight:200;
  font-size:clamp(2.2rem,3.5vw,3.2rem);line-height:1.08;letter-spacing:-.02em;
  max-width:22ch;text-wrap:balance;
}
.page-hero .lead{
  margin-top:22px;
  font-size:clamp(1.2rem,1.1rem + .4vw,1.3rem);line-height:1.6;color:var(--ink-900);
  max-width:62ch;text-wrap:pretty;
}
.page-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,4vw,38px)}
@media (max-width:599px){.page-hero-actions .btn{width:100%}}

/* Aujourd'hui / Avec Trifecta */
.pair{display:grid;grid-template-columns:1fr;gap:16px;margin-top:clamp(34px,5vw,54px)}
.pair-side{padding:clamp(18px,2.5vw,26px);border:1px solid var(--hairline);border-radius:10px;min-width:0}
.pair-lbl{
  margin:0;
  font-family:var(--font-body);font-weight:500;font-size:13.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.pair-txt{margin:10px 0 0;max-width:58ch;text-wrap:pretty}
.pair-today .pair-txt{color:var(--muted)}
.pair-with .pair-lbl{color:var(--orange-deep)}
@media (min-width:760px){
  .pair{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px)}
}

/* Pastilles « de → vers » */
.triplets{display:grid;grid-template-columns:1fr;gap:10px;margin-top:clamp(26px,4vw,38px)}
.triplets li{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:12px 20px;min-height:44px;
  border:1px solid var(--hairline);border-radius:999px;
  background:rgba(228,217,196,.28);
}
.tri-from{color:var(--muted);font-size:15px}
.tri-arrow{font-family:var(--font-display);color:var(--orange);line-height:1}
.tri-to{color:var(--ink-900);font-weight:600;font-size:15px}
@media (min-width:760px){
  .triplets{grid-template-columns:repeat(3,1fr)}
  .triplets li{flex-wrap:nowrap}
}

/* ============================== SOUS-NAV PAR CATÉGORIE ============================== */
.subnav{border-block:1px solid var(--hairline)}
.subnav ol{
  display:flex;flex-wrap:wrap;gap:6px;
  padding-block:clamp(14px,2vw,20px);
}
.subnav a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:10px 13px;border:1px solid var(--hairline);border-radius:999px;
  font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--ink-900);
  text-decoration:none;white-space:nowrap;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.subnav a:hover{border-color:var(--orange);color:var(--orange-deep)}
.subnav a[aria-current="page"]{
  background:var(--ink-900);border-color:var(--ink-900);color:var(--paper);
}
@media (max-width:599px){main.int .subnav ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}}
@media (max-width:759px){main.int .triplets li{border-radius:12px}}

/* ============================== SECTIONS DE CONTENU ============================== */
/* Une section sur deux reçoit .tint (posé par le builder) */
.section.tint{background:color-mix(in srgb,var(--champagne) 42%,var(--paper))}
.page-body{max-width:68ch;color:var(--ink-900)}
.page-body + .page-body{margin-top:16px}

.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(14px,2.5vw,26px);margin-top:clamp(30px,4vw,48px);
}
.cards li{
  padding:clamp(20px,3vw,30px);
  border:1px solid var(--hairline);border-radius:10px;background:var(--paper);
  min-width:0;
}
.cards h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.25;letter-spacing:-.01em;
}
.cards li:has(.card-link){position:relative;transition:border-color .2s,background .2s}
.cards li:has(.card-link):hover{border-color:var(--orange);background:rgba(228,217,196,.35)}
.card-link{color:inherit;text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0;border-radius:10px}
main.int .card-link:focus-visible{outline:none}
main.int .cards li:has(.card-link:focus-visible){outline:2px solid #9C520A;outline-offset:3px}
.cards p{margin-top:10px;color:var(--muted);font-size:17px;line-height:1.5;max-width:60ch;text-wrap:pretty}

/* ============================== ÉTAPES ============================== */
.steps{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--hairline)}
.steps li{
  display:grid;grid-template-columns:clamp(48px,12vw,88px) 1fr;
  gap:clamp(14px,3vw,28px);align-items:baseline;
  padding:clamp(20px,3vw,28px) 0;border-bottom:1px solid var(--hairline);
}
.step-num{
  font-family:var(--font-display);font-weight:200;
  font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;
  color:rgba(20,17,13,.32);
}
.steps h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.25;
}
.steps p{margin-top:6px;color:var(--muted);max-width:62ch;text-wrap:pretty}
.section.tint .steps li{border-color:rgba(20,17,13,.14)}
.section.tint .steps{border-color:rgba(20,17,13,.14)}

/* ============================== PLANS / FORFAITS ============================== */
.plans{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(14px,2.5vw,26px);align-items:stretch;
}
.plan{
  display:flex;flex-direction:column;min-width:0;
  padding:clamp(20px,3vw,30px);
  border:1px solid var(--hairline);border-radius:10px;background:var(--paper);
}
.plan h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.2rem,1.7vw,1.4rem);line-height:1.2;
}
.plan-price{
  margin-top:14px;
  font-family:var(--font-display);font-weight:200;
  font-size:clamp(1.6rem,2.3vw,2.2rem);line-height:1.1;letter-spacing:-.01em;
}
.plan-note{margin-top:8px;font-size:14px;color:var(--muted)}
.plan ul{margin-top:18px;border-top:1px solid var(--hairline);list-style:none}
.plan li{
  padding:10px 0;border-bottom:1px solid var(--hairline);
  font-size:15.5px;line-height:1.5;
}
.section.tint .plan li,.section.tint .plan ul{border-color:rgba(20,17,13,.14)}

/* ============================== VOIR AUSSI ============================== */
.related-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(14px,2.5vw,26px);
}
.related-card{
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;
  min-height:44px;padding:clamp(20px,3vw,28px);
  border:1px solid var(--hairline);border-radius:10px;
  color:inherit;text-decoration:none;min-width:0;
  transition:border-color .2s ease,background-color .2s ease;
}
.related-card:hover{border-color:var(--orange);background:rgba(228,217,196,.35)}
.related-card h3{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.2rem,1.7vw,1.4rem);line-height:1.2;
}
.related-go{color:var(--orange-deep);font-weight:600;font-size:15px}

/* ============================== PAGE PLACEHOLDER ============================== */
.badge-ph{
  display:inline-flex;align-items:center;min-height:44px;
  margin-top:22px;padding:10px 18px;
  border:1px dashed var(--orange-deep);border-radius:999px;
  color:var(--orange-deep);font-family:var(--font-body);font-weight:600;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
}
.page-hero .ph-note{margin-top:26px;color:var(--muted);font-size:18px;max-width:52ch}

/* ============================== FOOTER PLAN DU SITE ============================== */
/* .footer-sitemap : grille du pied généré (surcharge footer-grid de base.css, hors couche) */
.footer-sitemap{grid-template-columns:repeat(auto-fit,minmax(min(42vw,170px),1fr))}
.footer-sitemap .footer-col{min-width:0}
.footer-sitemap .footer-col li{margin-bottom:8px}
.footer-sitemap .footer-col a{font-size:15px}
.footer-sitemap .footer-col address{font-style:normal;color:var(--muted);font-size:15px}

/* ============================== ÉCRANS ÉTROITS ============================== */
/* Aucun débordement horizontal attendu à 375 px : grilles 1 colonne, pastilles flexibles. */

/* ============================== MOUVEMENT RÉDUIT ==============================
   Voir le bloc « IMAGES + MOUVEMENT » en fin de fichier : tout y est coupé sous
   prefers-reduced-motion (animations, transitions, flottaison, parallaxe). */

/* Page courante dans le menu principal (même rendu que le survol) */
.site-nav a[aria-current="page"]:not(.btn){color:var(--orange-deep);border-color:var(--orange)}


/* ====================================================================================
   IMAGES + MOUVEMENT (2026-10-09) — pages intérieures seulement
   Tout est préfixé main.int : l'accueil charge aussi pages.css et ne doit pas bouger.
   État « caché » de l'apparition : uniquement sous html.pg-on (posée dans le <head> si
   IntersectionObserver existe et que le mouvement n'est pas réduit). Sans JS : tout visible.
   ==================================================================================== */
main.int{--pg-ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- Héros : texte + image ---------- */
.pgh-grid{display:block}
.pgh-copy{min-width:0}
.pgh-media{
  position:relative;margin:clamp(26px,4vw,38px) 0 0;
  aspect-ratio:16/10;
}
.pgh-clip{ /* coins 12 px + coupe ; la figure, elle, laisse déborder le cadre signature */
  position:absolute;inset:0;z-index:1;border-radius:12px;overflow:hidden;isolation:isolate;
  background:color-mix(in srgb,var(--champagne) 55%,var(--paper));
}
.pgh-clip::after{ /* calque du bas (dégradé sous la carte, posé plus bas pour les photos) */
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
}
.pgh-img{
  display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;
  animation:pg-hero-in 1.2s var(--pg-ease) both;
}
.pgh-media.is-shot .pgh-img{object-position:50% 0}
@keyframes pg-hero-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}

/* Carte flottante : premier triplet « de → vers » */
.pgh-card{
  position:absolute;left:clamp(10px,2vw,20px);bottom:clamp(16px,2.6vw,26px);z-index:3;
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;
  max-width:calc(100% - clamp(20px,4vw,40px));padding:10px 16px;
  background:#fff;border-radius:10px;box-shadow:0 12px 30px rgba(18,15,11,.16);
  font-family:var(--font-body);font-size:14px;line-height:1.35;
  animation:pg-card-in .8s var(--pg-ease) .7s both;
}
.pgh-from{color:var(--muted)}
.pgh-arrow{color:var(--orange);font-family:var(--font-display);line-height:1}
.pgh-to{color:var(--orange-deep);font-weight:600}
@keyframes pg-card-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@media (min-width:900px){
  main.int .pgh-grid.has-media{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(32px,4.5vw,72px);align-items:center;
  }
  main.int .pgh-grid.has-media .pgh-media{margin:0;aspect-ratio:4/3}
}

/* ---------- Section avec image (2e section de contenu) ---------- */
.pgs-media{
  position:relative;margin:0 0 clamp(24px,4vw,34px);
  aspect-ratio:16/10;max-height:260px;width:100%;
}
.pgs-clip{
  position:absolute;inset:0;z-index:1;border-radius:12px;overflow:hidden;isolation:isolate;
  background:color-mix(in srgb,var(--champagne) 55%,var(--paper));
}
.pgs-media img{
  display:block;width:100%;height:100%;object-fit:cover;
}
.pgs-media.is-shot img{object-position:60% 0}
.pgs-main{min-width:0}
@media (min-width:900px){
  main.int .pgs-split{
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(32px,5vw,72px);align-items:start;
  }
  main.int .pgs-media{margin:0;aspect-ratio:4/5;max-height:none;position:sticky;top:96px}
  main.int .pgs-main .cards li:last-child:nth-child(odd){grid-column:1/-1}
}

/* ---------- SIGNATURE Trifecta sur toutes les images, 2026-10-09 ----------
   SOCLE (toujours actif) : cadre hairline orange décalé de 14 px derrière l'image (coins 12 px) ;
   monogramme blanc dans le coin haut droit du héros ; cadrage héros 70% 50% / section 50% 40% ;
   étalonnage commun (filtre + voile orangé multiply) ; dégradé sombre au bas du héros sous la carte flottante.
   VARIANTE B « couleur tenue » = le socle seul (défaut). VARIANTE A « tirage chaud » = html.tone-mono,
   posée par le script du <head> (?tone=mono, mémorisé ; ?tone=color l'efface) : mêmes cadres, photos quasi
   monochromes chaudes, l'orange (boutons, cadres, carte flottante) devient le seul accent coloré.
   Les captures d'écran locales (.is-shot, page Réalisations) gardent leurs couleurs et leur cadrage. */
main.int{
  --sig-off:14px;
  --sig-filter:saturate(.7) contrast(1.06) brightness(1.03) sepia(.12);
  --sig-veil:rgba(236,140,60,.14);
}
html.tone-mono main.int{
  --sig-filter:grayscale(1) sepia(.35) contrast(1.08) brightness(1.02);
  --sig-veil:rgba(236,140,60,.22);
}

/* Cadre orange décalé RETIRÉ le 10-10 (Philippe : « très typé de toi », déjà vu sur Divine). L'image porte seule, coins 12 px. */
main.int .pgh-media::before,
main.int .pgs-media::before{content:none}
/* Monogramme en traits fins, blanc, coin haut droit du héros (photos seulement) */
main.int .pgh-media:not(.is-shot)::after{
  content:"";position:absolute;top:14px;right:14px;z-index:2;width:56px;aspect-ratio:1075/1038;
  background:url(../img/mono-traits.png) center/contain no-repeat;
  filter:brightness(0) invert(1) drop-shadow(0 0 .6px #fff) drop-shadow(0 1px 3px rgba(20,16,12,.4));
  opacity:.85;pointer-events:none;
}

/* Étalonnage commun : filtre sur la photo, puis voile orangé en multiply */
main.int .pgh-media:not(.is-shot) .pgh-img,
main.int .pgs-media:not(.is-shot) img{filter:var(--sig-filter)}
main.int .pgh-media:not(.is-shot) .pgh-img{object-position:70% 50%}
main.int .pgs-media:not(.is-shot) img{object-position:50% 40%}
main.int .pgh-media:not(.is-shot) .pgh-clip::before,
main.int .pgs-media:not(.is-shot) .pgs-clip::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--sig-veil);mix-blend-mode:multiply;
}
/* Bas du héros : transparent -> quasi-noir chaud sur 40 %, pour asseoir la carte flottante
   (l'ancienne barre orange de 4 px est retirée : elle doublait le cadre signature) */
main.int .pgh-media:not(.is-shot) .pgh-clip::after{
  background:linear-gradient(to bottom,transparent 60%,rgba(20,16,12,.45));
}

/* ---------- Appel à l'action avec image de fond ---------- */
main.int .cta.cta-photo{
  background-color:var(--ink-900);
  background-image:linear-gradient(180deg,rgba(18,15,11,.9),rgba(18,15,11,.82)),var(--cta-img);
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat;
}
/* Variante A : la photo ne garde que sa luminosité, posée sur une teinte chaude (le dégradé sombre reste dessus) */
html.tone-mono main.int .cta.cta-photo{background-color:#5a3512;background-blend-mode:normal,luminosity}

/* ============================== TÉMOIGNAGES ==============================
   Citations (section #temoignages). Le premier témoignage (.quote-lead) tient toute la largeur ;
   les autres s'écoulent en 2 colonnes CSS dès 900 px (hauteurs inégales sans trous), 1 colonne en dessous.
   Apparition = pg-rv / pg-in comme les autres blocs ; les transitions viennent de la règle « html main.int .pg-rv ». */
.quotes{margin-top:clamp(30px,4vw,48px)}
.quote{
  position:relative;min-width:0;margin:0 0 20px;
  padding:28px 28px 24px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:12px;
}
.quote::before{
  content:"\201C";content:"\201C" / "";
  position:absolute;top:10px;left:24px;
  font-family:var(--font-display);font-weight:300;font-size:2.2rem;line-height:1;color:var(--orange);
  pointer-events:none;
}
.quote blockquote{margin:0;padding-top:22px}
.quote blockquote p{font-size:1.02rem;line-height:1.6;color:var(--ink-900);text-wrap:pretty}
.quote figcaption{margin-top:18px;display:flex;flex-direction:column;gap:3px}
.quote-org{
  font-family:var(--font-body);font-weight:600;font-size:.8rem;line-height:1.4;
  letter-spacing:.06em;text-transform:uppercase;color:var(--orange-deep);
}
.quote-by{font-size:.92rem;line-height:1.4;color:var(--muted)}

/* Témoignage en tête : pleine largeur, texte d'affichage, grand guillemet hors flux */
.quote-lead{
  margin:0 0 28px;padding:52px 0 clamp(8px,1.6vw,16px) 0;
  background:none;border:0;border-radius:0;
}
.quote-lead::before{
  top:0;left:-4px;font-size:4rem;line-height:.9;opacity:.9;
}
.quote-lead blockquote{padding-top:0}
.quote-lead blockquote p{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.2rem,.95rem + 1vw,1.45rem);line-height:1.45;letter-spacing:-.005em;
  max-width:62ch;text-wrap:pretty;
}
.quote-lead figcaption{margin-top:24px}
.quote-lead .quote-org{font-size:.86rem}
.quote-lead .quote-by{font-size:.98rem}

@media (min-width:640px){
  .quote-lead{padding:6px 0 8px clamp(64px,8vw,96px)}
  .quote-lead::before{top:2px;left:0}
}
@media (min-width:900px){
  .quotes{columns:2;column-gap:32px}
  .quote{break-inside:avoid;margin-bottom:32px}
  .quote-lead{column-span:all;margin-bottom:40px}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  main.int .quote:not(.quote-lead):hover{translate:0 -2px;box-shadow:0 8px 24px rgba(0,0,0,.07)}
}

/* ---------- Apparition au défilement (pg-rv → pg-in, posé par js/pages.js) ---------- */
html.pg-on main.int .pg-rv:not(.pg-in){opacity:0;transform:translateY(10px)}
/* Filet : si pages.js n'a jamais tourné (réseau), tout réapparaît après 8 s */
html.pg-on:not(.pg-ready) main.int .pg-rv{animation:pg-show 0s 8s forwards}
@keyframes pg-show{to{opacity:1;transform:none}}

/* Triplets : la flèche (SVG) reste alignée avec le texte de la pastille */
main.int .tri-arrow{display:inline-block}

/* ---------- Survol (souris seulement : la levée ne touche que ce qui est cliquable) ---------- */
main.int .related-card{transition:translate .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease}
main.int .related-go span{display:inline-block;transition:transform .16s ease}
@media (hover:hover){
  main.int .cards li:has(.card-link):hover,
  main.int .related-card:hover{translate:0 -3px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
  main.int .related-card:hover .related-go span{transform:translateX(4px)}
}
/* Boutons : retour tactile bref à l'appui */
main.int .btn{transition:background-color .25s ease,border-color .25s ease,transform .12s ease}
main.int .btn:active{transform:scale(.97)}
main.int .btn-primary{transition:background-color .25s ease,transform .12s ease,border-color .25s ease,box-shadow .25s ease}
main.int .btn-primary:hover{box-shadow:0 6px 22px rgba(232,136,32,.25)}
/* Transitions de tout élément .pg-rv : apparition (avec décalage) + survol (lift, ombre, bordure).
   html devant pour primer sur .cards li:has(.card-link) de ce même fichier. */
html main.int .pg-rv{
  transition:
    opacity .4s var(--pg-ease) calc(var(--d,0) * 50ms),
    transform .4s var(--pg-ease) calc(var(--d,0) * 50ms),
    translate .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}

/* ---------- Mouvement réduit : aucune animation, aucune transition, tout visible ---------- */
@media (prefers-reduced-motion:reduce){
  main.int *,main.int *::before,main.int *::after{animation:none!important;transition:none!important}
  main.int .pg-rv,html.pg-on main.int .pg-rv:not(.pg-in){opacity:1!important;transform:none!important}
  main.int .pgh-img,main.int .pgh-card{opacity:1!important;transform:none!important}
}

/* ---------- Formulaire de contact (page Contact, section #formulaire) ---------- */
main.int .cform{display:grid;grid-template-columns:1fr;gap:28px 40px;max-width:780px;margin-top:clamp(30px,4vw,48px)}
@media (min-width:700px){
  main.int .cform{grid-template-columns:1fr 1fr}
  main.int .cf-wide{grid-column:1 / -1}
}
main.int .cf-field{display:grid;gap:0}
main.int .cf-input{width:100%;font-size:20px}
main.int .cf-select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;
  background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23101010' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center;
}
main.int .cf-select option{font:400 16px/1.4 'Hanken Grotesk',system-ui,sans-serif}
main.int .cf-area{min-height:150px;resize:vertical;line-height:1.4;padding-top:10px;font-size:19px}
@media (max-width:599px){main.int .cf-input{font-size:17px}main.int .cf-select{font-size:16px}}
main.int .cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:4px}
main.int .cf-input:user-invalid{border-bottom-color:#b3261e}
main.int .cf-input:focus-visible{outline:2px solid #9C520A;outline-offset:4px;border-bottom-color:#9C520A}
main.int .cf-err{display:none;font-size:14px;color:#b3261e;margin-top:6px}
main.int .cf-input:user-invalid ~ .cf-err{display:block}
main.int .cf-status{margin:0;font-size:15px;color:var(--muted)}
main.int .cf-status:empty{display:none}

/* ---------- Sections vivantes (10-10) : titre et intro côte à côte, cartes, une section sombre ---------- */
main.int .sec-top{display:grid;gap:18px 56px;margin-bottom:0}
main.int .sec-top .section-head{margin-bottom:0}
main.int .section-body .page-body{max-width:58ch}
@media (min-width:1000px){
  main.int .wrap > .sec-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start} /* 11-10 : titre en haut, aligné sur la première ligne du texte (était end : le titre coulait sous les intros longues) */
  main.int .wrap > .sec-top .section-body{padding-top:.55em}
}
main.int .card-go{display:inline-flex;margin-top:14px;color:var(--orange-deep);font-size:18px;line-height:1;transition:transform .16s ease}
main.int .cards li:hover .card-go{transform:translateX(4px)}
main.int .card-go svg,main.int .related-go svg,main.int .related-go-ic svg,main.int .tri-arrow svg,main.int .pgh-arrow svg{width:18px;height:18px;vertical-align:middle;display:inline-block}

main.int .section.dark:not(.cta){background:var(--ink-900);color:var(--paper)}
main.int .section.dark .page-body{color:var(--paper)}
main.int .section.dark .cards li{background:rgba(247,243,234,.045);border-color:var(--hairline-dark);color:var(--paper)}
main.int .section.dark .cards h3{color:var(--paper)}
main.int .section.dark .cards p{color:var(--muted-dark)}
main.int .section.dark .cards li:has(.card-link):hover{background:rgba(247,243,234,.09);border-color:var(--orange)}
main.int .section.dark .cards li:has(.card-link):hover{box-shadow:0 12px 34px rgba(0,0,0,.35)}
main.int .section.dark .card-go{color:var(--orange-light)}
main.int .section.dark .steps,main.int .section.dark .steps li{border-color:var(--hairline-dark)}
main.int .section.dark .steps h3{color:var(--paper)}
main.int .section.dark .steps p{color:var(--muted-dark)}
main.int .section.dark .step-num{color:rgba(247,243,234,.36)}

@media (prefers-reduced-motion:reduce){
  main.int .card-go{transform:none!important;transition:none!important}
}

/* ====================================================================================
   REVUE 10-10 — hiérarchie typographique, accessibilité, mise en page, impression
   Tout est préfixé main.int (ou html:has(main.int)) : l'accueil charge aussi pages.css.
   ==================================================================================== */

/* ---------- Hiérarchie typographique ---------- */
main.int .sec-title{font-size:clamp(1.75rem,2.9vw,2.6rem)}
main.int .cta .sec-title{font-size:clamp(1.75rem,2.9vw,2.6rem);font-weight:300}
main.int :is(.cards,.steps,.plan,.related-card) h3,main.int .faq summary{font-size:clamp(1.3rem,1.15rem + .4vw,1.4rem);font-weight:400}
main.int .plan li,main.int .cta-text{font-size:17px}
main.int .page-body{line-height:1.55}
main.int .cform .act-label{font-size:13px}
main.int .section.dark:not(.cta) .sec-title{font-weight:400}
main.int .section.dark :is(.cards,.steps) h3{font-weight:500}
main.int :is(h1,h2,h3){text-wrap:balance}
/* base.css .card-link (15 px / 600) fuit sur les titres de cartes : le h3 garde sa taille et son poids */
main.int .cards .card-link{font:inherit;padding:0;border:0;letter-spacing:inherit;text-transform:none}
main.int .plan-price,main.int a[href^="tel:"]{font-variant-numeric:tabular-nums}
main.int :is(h1,h2,h3,blockquote){overflow-wrap:anywhere}
main.int :is(.cards,.steps,.triplets,.pgs-split,.pgh-grid,.cform,.plans)>*{min-width:0}

/* ---------- Accessibilité ---------- */
html:has(main.int){scroll-padding-top:100px}
main.int :focus-visible{outline-color:#9C520A}
main.int .section.dark :focus-visible,main.int .cta :focus-visible{outline-color:var(--orange)}
main.int .section.dark .cards li:has(.card-link:focus-visible){outline-color:var(--orange)}

/* ---------- Mise en page ---------- */
@media (max-width:599px){
  main.int .pgh-card{left:16px;bottom:16px;max-width:calc(100% - 32px)}
}
/* Réalisations : 7 cartes en 3 + 3 + 1 plutôt que 4 + 3 */
@media (min-width:900px){
  main.int #selection .cards{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Impression : tout visible, sans transition ---------- */
@media print{main.int .pg-rv{opacity:1!important;transform:none!important}}

/* ---------- « Trifecta en bref » (10-10) : trois faits avant l'appel final, renvoi vers À propos ---------- */
main.int .section.proof{padding:0;background:var(--paper)}
main.int .proof-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border-block:1px solid var(--hairline)}
main.int .proof-list li+li{border-top:1px solid var(--hairline)}
main.int .proof-list a{display:grid;gap:8px;padding:clamp(22px,3vw,34px) 0;color:inherit;text-decoration:none;transition:color .16s ease}
main.int .proof-list strong{font:400 clamp(1.25rem,1.1rem + .5vw,1.5rem)/1.2 'Outfit',system-ui,sans-serif;color:var(--ink-900);letter-spacing:-.01em;text-wrap:balance}
main.int .proof-list span{font-size:15px;line-height:1.5;color:var(--muted);max-width:34ch}
main.int .proof-list a:hover strong{color:var(--orange-deep)}
@media (min-width:760px){
  main.int .proof-list{grid-template-columns:repeat(3,1fr)}
  main.int .proof-list li+li{border-top:0;border-left:1px solid var(--hairline)}
  main.int .proof-list li+li a{padding-left:clamp(22px,3vw,40px)}
  main.int .proof-list li:first-child a{padding-right:clamp(22px,3vw,40px)}
  main.int .proof-list li:nth-child(2) a{padding-right:clamp(22px,3vw,40px)}
}

/* ---------- Comparaison des coûts (11-10) : coûts à prévoir à gauche en lignes, forfait à droite sur panneau sombre ---------- */
main.int .compare{display:grid;gap:18px;margin-top:clamp(28px,4vw,44px)}
main.int .compare-col{min-width:0;border:1px solid var(--hairline);border-radius:10px;padding:clamp(22px,3vw,34px);background:var(--paper)}
main.int .compare-label{margin:0 0 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
main.int .compare-rows{list-style:none;margin:0;padding:0}
main.int .compare-rows li{padding:18px 0;border-top:1px solid var(--hairline)}
main.int .compare-rows li:first-child{border-top:0;padding-top:12px}
main.int .compare-rows h3{margin:0 0 6px;font-family:var(--font-display);font-weight:400;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.25;letter-spacing:-.01em}
main.int .compare-rows p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
main.int .compare-total{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--hairline);font-size:15px;color:var(--muted)}
main.int .compare-us{display:flex;flex-direction:column;background:var(--ink-900);border-color:var(--ink-900);color:var(--paper)}
main.int .compare-us .compare-label{color:var(--muted-dark)}
main.int .compare-us h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.25;letter-spacing:-.01em;color:var(--paper)}
main.int .compare-lines{list-style:none;margin:18px 0 0;padding:0}
main.int .compare-lines li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--hairline-dark);font-size:15px;line-height:1.4;color:var(--muted-dark)}
main.int .compare-lines .compare-val{white-space:nowrap;color:var(--paper)}
main.int .compare-figure{margin:auto 0 0;padding-top:24px;font-family:var(--font-display);font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;letter-spacing:-.02em;color:var(--paper)}
main.int .compare-figure-note{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--muted-dark)}
main.int .compare-close{margin:18px 0 0;font-size:16px;line-height:1.5;color:var(--paper)}
@media (min-width:900px){main.int .compare{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}}

/* À propos (11-10, 16 h) : ligne du temps des virages et liste des dix principes, lisibles d'un coup d'œil */
main.int .timeline,main.int .principles{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0}
main.int .timeline li{display:grid;grid-template-columns:5.5rem 1fr;gap:18px;align-items:baseline;padding:14px 0;border-top:1px solid var(--hairline)}
main.int .timeline li:last-child{border-bottom:1px solid var(--hairline)}
main.int .tl-year{font-family:var(--font-display);font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1;color:var(--orange-deep);font-variant-numeric:tabular-nums}
main.int .timeline p{margin:0;font-size:17px;line-height:1.5;color:var(--muted);max-width:60ch;text-wrap:pretty}
main.int .section.dark .timeline li{border-color:rgba(255,255,255,.16)}
main.int .section.dark .tl-year{color:var(--orange)}
main.int .section.dark .timeline p{color:var(--muted-dark)}
main.int .principles{display:grid;gap:0 clamp(24px,4vw,56px);counter-reset:pr}
main.int .principles li{display:grid;grid-template-columns:2.4rem 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--hairline);counter-increment:pr}
main.int .principles li::before{content:counter(pr,decimal-leading-zero);font-family:var(--font-display);font-size:1rem;line-height:1.5;color:var(--orange-deep);font-variant-numeric:tabular-nums}
main.int .principles h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.3}
main.int .principles p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--muted);max-width:50ch}
@media (min-width:900px){main.int .principles{grid-template-columns:1fr 1fr}main.int .principles li:nth-child(2){border-top-color:var(--hairline)}}

/* ---------- Passe des skills de design (11-10, 16 h 50) : critique impeccable + design-web-agence, typo dembrandt,
   finitions Krehel, WCAG 2.2 / Vercel. Tout sous main.int ; constats et décisions dans NOTES_CONTENU.md. ---------- */
/* 1. Hiérarchie : h1 plus grand, h3 de cartes décollés du lead, intro de section en 18 px, poids cohérents sur fond sombre */
main.int .page-title{font-size:clamp(2.3rem,3.9vw,3.6rem)}
main.int .page-hero .lead{max-width:58ch}
main.int :is(.cards,.steps,.related-card) h3{font-size:clamp(1.4rem,1.25rem + .5vw,1.5rem)}
main.int .plan h3{font-size:1.25rem}
main.int .plan-price{font-weight:300}
main.int .sec-top .section-body .page-body:first-child{font-size:1.125rem;line-height:1.55}
main.int .cta .sec-title{font-weight:400}
main.int .compare-us h3{font-weight:500}
main.int :is(.steps p,.pair-txt,.faq-a p,.cta-text){line-height:1.55}
main.int .plan-note{line-height:1.5}
main.int :is(.pair-lbl,.compare-label,.badge-ph,.quote-org,.cform .act-label){font-size:14px;letter-spacing:.12em}
main.int :is(p,li){text-wrap:pretty}
main.int .step-num{color:var(--orange-deep)}
main.int .section.dark .step-num{color:var(--orange)}
/* 2. Rythme vertical : sections moins hautes (une section de trois lignes n'a plus 132 px d'air), titre de section collant */
main.int .section:not(.cta):not(.proof):not(.page-hero){padding-block:clamp(56px,7vw,96px)}
main.int .section.faq{padding-block:clamp(48px,6vw,80px)}
@media (min-width:1000px){main.int .wrap>.sec-top .section-head{position:sticky;top:110px}}
/* 3. Cartes : trois colonnes lisibles (38-40 caractères par ligne au lieu de 26), deux pour 2 ou 4 cartes ; cartes-liens marquées au survol */
@media (min-width:600px){main.int .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  main.int .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  main.int .cards:has(>li:nth-child(2):last-child),main.int .cards:has(>li:nth-child(4):last-child),main.int .pgs-main .cards,main.int #dix-raisons .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
main.int{--sh-lift:0 1px 2px rgba(18,15,11,.06),0 10px 28px -6px rgba(18,15,11,.14)}
@media (hover:hover){
  main.int :is(.cards li:has(.card-link),.related-card,.quote:not(.quote-lead)):hover{box-shadow:var(--sh-lift)}
  main.int .cards li:has(.card-link):hover{border-color:rgba(20,17,13,.32)}
}
main.int .card-go svg{margin-left:-4px}
main.int .principles li{align-items:baseline}
main.int .quote{border-radius:10px}
@media (max-width:759px){main.int .triplets li{border-radius:10px}}
main.int .btn:active{transform:scale(.96)}
/* 4. Hero : la carte flottante répétait mot pour mot la première pastille ; entre 900 et 1099 px l'image passe sous le texte */
main.int .pgh-card{display:none}
@media (min-width:900px) and (max-width:1099px){
  main.int .pgh-grid.has-media{display:block}
  main.int .pgh-grid.has-media .pgh-media{margin:clamp(26px,4vw,38px) 0 0;aspect-ratio:16/10}
}
/* 5. FAQ alignée sur les autres sections : sans surtitre, questions en 300, réponses en encre */
main.int .faq .sec-label{display:none}
main.int .faq summary{font-weight:300;font-size:clamp(1.15rem,1.9vw,1.4rem)}
main.int .faq .faq-a{color:var(--ink-900);max-width:64ch}
/* 6. Pourquoi Trifecta : dix cartes numérotées (le titre les annonce), comparaison alignée en haut, chiffres lisibles */
main.int #dix-raisons .cards{counter-reset:dr}
main.int #dix-raisons .cards li{counter-increment:dr}
main.int #dix-raisons .cards h3::before{content:counter(dr,decimal-leading-zero);display:block;margin-bottom:8px;font-size:.85rem;line-height:1;color:var(--orange-deep);font-variant-numeric:tabular-nums;letter-spacing:.04em}
main.int .compare-rows p{font-size:16px}
main.int .compare-total{font-size:1.2rem;color:var(--ink-900)}
main.int .compare-figure{font-size:clamp(2.4rem,4vw,3.4rem)}
@media (min-width:900px){main.int .compare{align-items:start}}
/* 7. Forfaits : titre visible (générateur), 2 × 2 quand il y en a quatre entre 600 et 1279 px */
@media (min-width:600px) and (max-width:1279px){main.int .plans:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 8. Appel final : la photo se devine sous le voile */
main.int .cta.cta-photo{background-image:linear-gradient(180deg,rgba(18,15,11,.84),rgba(18,15,11,.72)),var(--cta-img)}
/* 9. Contact : le formulaire remonte d'un écran, la page se passe des blocs Aujourd'hui / pastilles ; statut annoncé, couleurs du menu déroulant */
main.int:has(.cform) :is(.pair,.triplets){display:none}
main.int .cform{--fg:var(--ink-900);--fg-2:var(--muted)}
main.int .cf-status:empty{display:block;min-height:0;margin:0}
main.int .cf-select option{color:var(--ink-900);background:var(--paper)}
/* 10. Accessibilité : focus lisible dans l'en-tête, pastilles visibles avant le script, séparateur du fil d'Ariane muet,
   zones cliquables du fil, défilement de la sous-nav indiqué, mouvement réduit sur la FAQ */
html:has(main.int) .site-header :focus-visible{outline-color:#9C520A}
html.pg-on main.int .triplets .pg-rv:not(.pg-in){opacity:1;transform:none}
main.int .breadcrumb li+li::before{content:"›" / ""}
main.int .breadcrumb a{position:relative}
main.int .breadcrumb a::after{content:"";position:absolute;inset:-9px -6px}
@media (max-width:759px){main.int .subnav{mask-image:linear-gradient(90deg,#000 88%,transparent)}}
@media (prefers-reduced-motion:reduce){main.int .faq details::details-content{transition:none}}

/* Seconde passe des skills (11-10, 17 h 40) : ui-ux-pro-max en contre-avis, taste-redesign, hiérarchie dembrandt, Emil (animations), ibelick (mouvement, accessibilité) */
/* 1. mouvement : une seule courbe, entrées plus courtes, FAQ sans cascade, repli à 3 s si l'observateur ne répond pas */
html:has(main.int){--eo:cubic-bezier(.23,1,.32,1)}
main.int{--pg-ease:var(--eo)}
@keyframes pg-hero-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
html.pg-on:not(.pg-ready) main.int .pg-rv{animation:pg-show 0s 3s forwards}
html.pg-on main.int .faq .pg-rv:not(.pg-in){opacity:1;transform:none}
html main.int .quote:not(.quote-lead):hover{translate:none;box-shadow:none}
@media (prefers-reduced-motion:no-preference){
  main.int .pgh-img{animation-duration:.6s}
  html main.int .pg-rv{transition-duration:.32s,.32s,.16s,.16s,.16s,.16s}
  main.int :is(.btn,.btn-primary,.subnav a,.breadcrumb a){transition-duration:.16s}
  main.int .faq summary{transition:color .16s ease}
  main.int .faq .faq-ico{transition:transform .28s var(--eo)}
  main.int .faq details::details-content{transition:block-size .28s var(--eo),content-visibility .28s allow-discrete}
}
/* 2. hiérarchie : h1 en 300, « À partir de » en étiquette au-dessus du montant, bouton sous les forfaits, forfait seul borné */
main.int .page-title{font-weight:300}
main.int .plan-from{display:block;margin-bottom:6px;font:500 14px/1.2 var(--font-body);letter-spacing:.04em;color:var(--muted)}
main.int .plan-price{font-size:clamp(2rem,2.8vw,2.6rem)}
main.int .plans:has(>:only-child){grid-template-columns:minmax(0,34rem)}
main.int .plans-actions{margin:clamp(22px,3vw,32px) 0 0}
main.int .proof-list a strong{text-decoration:underline 1px rgba(20,17,13,.3);text-underline-offset:.25em}
/* page Services : les trois familles numérotées dans l'ordre promis (être trouvé, convaincre, répondre) */
main.int{counter-reset:fam}
main.int :is(#visibilite,#site,#intelligence-artificielle) .sec-title::before{counter-increment:fam;content:"0" counter(fam) / "";display:block;margin-bottom:10px;font:400 .85rem/1 var(--font-body);letter-spacing:.14em;color:var(--orange-deep)}
/* 3. lisibilité du comparatif sur petit écran */
main.int .compare-lines li{line-height:1.5}
@media (max-width:480px){main.int .compare-lines li{flex-direction:column;gap:2px}}
/* 4. accessibilité : numéros décoratifs muets, focus de la sous-navigation non rogné */
main.int .principles li::before{content:counter(pr,decimal-leading-zero) / ""}
main.int #dix-raisons .cards h3::before{content:counter(dr,decimal-leading-zero) / ""}
@media (max-width:599px){main.int .subnav ol{padding-inline:6px;margin-inline:-6px}}
/* Forfait mis en avant (12-10, « ok go ») : sur la vitrine, Professionnel est la base du « moins de 70 $ par mois » */
main.int:has(#travail-invisible) .plans>.plan:nth-child(2){border-color:var(--ink-900);box-shadow:inset 0 0 0 1px var(--ink-900)}
/* Services (12-10) : le prix d'une carte en étiquette, sous le texte, au lieu d'une fin de phrase */
main.int .card-price{margin:10px 0 0;font:500 15px/1.3 var(--font-body);color:var(--ink-900);font-variant-numeric:tabular-nums}
main.int .cards li:has(.card-price) .card-go{margin-top:8px}


/* ============================== CORRECTIFS RESPONSIVE DU GABARIT (26-10) ============================== */
/* Rien ici ne s'applique au-delà de 899 px (bureau inchangé) ; les cibles tactiles suivent aussi (pointer:coarse). */

/* D3 : une adresse web ou un mot très long dans le contenu se coupe au lieu de dépasser (320 px : 23 px coupés à droite) */
@media (max-width:899px){
  main.int :is(p,li,dd,dt,td,th,figcaption,blockquote,address) a{overflow-wrap:anywhere}
  main.int :is(p,li,dd,dt,td,th,figcaption,blockquote,address){overflow-wrap:break-word}
  /* les chiffres d'étape (02, 03, 04…) ne se coupent jamais : un seul mot, colonne de grille plus étroite que le chiffre */
  main.int .step-num{overflow-wrap:normal}
  /* réponses de la FAQ (colonne de 190 px à 320 px) : une adresse courriel en texte brut ne se coupe pas au milieu, elle garde son rendu d'origine */
  main.int .faq-a p{overflow-wrap:normal}
}

/* D4 : fil d'Ariane sur une seule ligne jusqu'à 640 px ; la page courante s'abrège (…) au lieu de passer à la ligne
   avec un « › » en tête de seconde ligne. contain:inline-size : la liste ne force plus la largeur de son conteneur. */
@media (max-width:640px){
  main.int .breadcrumb ol{flex-wrap:nowrap;contain:inline-size}
  main.int .breadcrumb li{flex:none;white-space:nowrap}
  main.int .breadcrumb li:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  main.int .breadcrumb li+li::before{margin:0 7px}
}

/* D5 : cibles tactiles de 44 px minimum (liens du pied de page, fil d'Ariane, liens de gabarit).
   Pied de page : la hauteur de ligne passe à 44 px (l'écart de 8 px entre lignes est absorbé dans la cible).
   Fil d'Ariane, « Voir ce service », « À propos » : le remplissage agrandit la cible sans déplacer la mise en page. */
@media (max-width:899px),(pointer:coarse){
  .footer-sitemap .footer-col li{margin-bottom:0}
  .footer-sitemap .footer-col a{display:flex;align-items:center;width:fit-content;max-width:100%;min-height:44px}
  main.int .breadcrumb a{padding-block:13px;border-bottom:0}
  main.int .breadcrumb a::after{inset:0 -6px}
  main.int .breadcrumb a:hover{border-bottom:0;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
  /* marge haute -6px (et non -13px) : l'écart de 6 px de la légende absorbe le reste, la cible ne chevauche plus l'étiquette au-dessus */
  .proj-link{padding-block:13px;margin-block:-6px -13px}
  .why-link{padding-block:9px;margin-block:-3px}
}

/* D6 : texte de gabarit d'au moins 12 px sur téléphone (les maquettes décoratives aria-hidden gardent leur échelle) */
@media (max-width:480px){
  .demo-cap,.tp-lbl,.ia-demo-tag,.pal-gl,.pal-h,.footer-bottom .draft{font-size:12px}
}

/* Accueil, formulaire du héros à 320 px : le champ d'adresse (largeur intrinsèque ~ 292 px à 22 px de police) imposait sa largeur
   à la colonne de la grille : formulaire de 292 px dans une colonne de 280 px, soulignement à 8 px du bord droit.
   width:100% rend sa contribution minimale nulle (la base flex de 220 px reste celle qui décide : rien ne bouge au-delà). */
@media (max-width:359px){
  .hero-act .act-input{width:100%}
}