/* ==========================================================
   AES COMMUNICATION - PAGES INTERIEURES ET MENU
   Chargee apres site.css. Tout ce qui est propre au site
   multi-pages est ici : menu complet, pages prestations,
   pages legales, blocs partages.
   ========================================================== */

/* ---------- Plus de rose clair (demande d'Alain, 11/09/2026) ----------
   Le « bordeaux eclairci » servait a tout ce qui se pose sur fond sombre : titres,
   surtitres, boutons, numeros, pied de page. Il est redefini en blanc, ce qui le
   remplace partout d'un coup. Le bordeaux plein reste la couleur des fonds clairs. */
:root{--rouge-v:#8E1520}

/* ---------- Le logo de Nathalie (10/09/2026) ----------
   La panthere de son logo en image, et le lettrage recompose en CSS avec une serif
   Didot (Bodoni Moda), le E et COM en bordeaux comme sur le logo. Le logo complet,
   trop carre pour l'en-tete, est affiche en grand dans le pied de page. */
.logo{gap:12px}
/* plus grande que la pilule (74 px) : elle deborde un peu en haut et en bas, comme posee dessus */
.logo .fauve-img{display:block;height:88px;width:auto;flex:0 0 auto;margin:-14px 0;transition:transform .5s var(--t)}
.logo:hover .fauve-img{transform:translateX(-2px) scale(1.04)}
@media(max-width:560px){.logo .fauve-img{height:72px;margin:-8px 0}}
.logo .mot b{
  font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:clamp(26px,2.3vw,32px);
  letter-spacing:.03em;line-height:1;background:none;color:var(--encre);-webkit-text-fill-color:var(--encre);
}
.logo .mot b i{font-style:normal;color:var(--bordeaux);-webkit-text-fill-color:var(--bordeaux)}
.logo .mot em{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:clamp(7.5px,.72vw,9.5px);letter-spacing:.24em;color:var(--encre);margin-top:2px}
.logo .mot em i{color:var(--bordeaux)}
.sombre .logo .mot b{background:none;color:#fff;-webkit-text-fill-color:#fff}
.sombre .logo .mot b i{color:var(--rouge-v);-webkit-text-fill-color:var(--rouge-v)}
.sombre .logo .mot em{color:#fff}
.sombre .logo .mot em i{color:var(--rouge-v)}
.pied-logo-lien{display:inline-block;margin-bottom:18px}
.pied-logo{display:block;height:150px;width:auto}
/* l'ouverture : la panthere du logo a la place de la tete facettee */
.rideau .fauve-r{
  display:block;height:clamp(120px,16vw,210px);width:auto;aspect-ratio:auto;
  background:none;filter:none;opacity:0;transform:translateY(18px) scale(.94);
  animation:bond 1s var(--t) .1s forwards;
}

/* ---------- Menu : survol et page active en bordeaux ---------- */
.nav a:hover,
.nav li.actif > a,
.nav a[aria-current="page"]{color:var(--bordeaux);background:rgba(102,0,51,.07)}
.nav li.actif > a{font-weight:600}
.nav-p{display:flex;align-items:center}
.a-sous{position:relative;display:flex;align-items:center}
.a-sous > a{padding-right:8px}
.sous-b{
  border:0;background:none;cursor:pointer;width:26px;height:30px;margin-right:2px;
  display:grid;place-items:center;color:var(--gris-f);border-radius:99px;
  transition:color .3s,background .3s;
}
.sous-b:hover,.a-sous.actif .sous-b{color:var(--bordeaux)}
.sous-b svg{width:12px;height:12px;transition:transform .35s var(--t)}
.a-sous:hover .sous-b svg,.a-sous.ouvert .sous-b svg,.a-sous:focus-within .sous-b svg{transform:rotate(180deg)}
/* pont invisible entre le lien et sa liste, pour ne pas la perdre en descendant la souris */
.a-sous::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.sous{
  position:absolute;top:calc(100% + 12px);left:0;min-width:286px;z-index:5;
  background:rgba(255,255,255,.98);backdrop-filter:blur(20px);
  border:1px solid var(--bord);border-radius:18px;padding:8px;
  box-shadow:0 24px 54px -26px rgba(16,18,21,.5);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s var(--t),transform .3s var(--t),visibility .3s;
}
.a-sous:hover .sous,.a-sous.ouvert .sous,.a-sous:focus-within .sous{opacity:1;visibility:visible;transform:none}
.sous li{list-style:none}
.sous a{display:block;padding:10px 14px;border-radius:12px;font-size:14px;white-space:nowrap}

/* ---------- En-tete en barre pleine largeur (10/09/2026, d'apres afalence.com) ----------
   La pilule flottante est remplacee par une barre blanche sur toute la largeur, libelles
   en capitales, appel a l'action a droite. Le mega menu s'ouvre sous la barre, sur toute
   la largeur, avec son contenu centre. */
.header{padding:0}
.header .barre{
  max-width:none;height:78px;padding:0 var(--marge);border-radius:0;border:0;
  background:rgba(255,255,255,.94);backdrop-filter:blur(18px) saturate(160%);
  gap:clamp(16px,2.5vw,40px);
}
/* aucun trait : la barre se detache seulement par une ombre tres legere une fois la page defilee */
.header.pose .barre{background:rgba(255,255,255,.98);box-shadow:0 8px 24px -18px rgba(16,18,21,.28)}
/* le bloc du menu reste non positionne : c'est la barre qui sert de reference au mega menu */
.header .barre > .logo,.header .barre > .cta-h{position:relative;z-index:2}
.nav > li > a{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:10px 14px}
.mega-liste a{text-transform:none;letter-spacing:0;font-weight:400;padding:10px 12px}
.nav-p{margin-left:auto}
.cta-h{margin-left:0}
.tel-h{font-size:14px}
.cta-h .btn-sm{padding:12px 22px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.logo .fauve-img{height:66px;margin:-2px 0}
@media(max-width:560px){.header .barre{height:64px;padding:0 16px}.logo .fauve-img{height:54px;margin:0}}

/* ---------- Mega menu (10/09/2026) : un large panneau sous la barre, cartes avec photo ---------- */
.header .barre{position:relative}
.mega-parent{position:static}
.mega{
  left:0;right:0;top:100%;min-width:0;padding:0;border:0;
  border-radius:0 0 24px 24px;box-shadow:0 34px 70px -30px rgba(16,18,21,.35);
  transform:translateY(0);
}
.mega-aside{border-left:0}
.mega-ph{border:0}
.a-sous:hover .mega,.a-sous.ouvert .mega,.a-sous:focus-within .mega{transform:none}
.mega-in{display:grid;grid-template-columns:1fr 320px;gap:0;max-width:var(--max);margin:0 auto}
.mega-parent::after{top:100%;height:0}
.mega-liste{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:14px}
.mega-liste-3{grid-template-columns:repeat(3,1fr)}
.mega-liste li{list-style:none}
.mega-liste a{
  display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;
  white-space:normal;font-size:14px;transition:background .3s var(--t);
}
.mega-liste a:hover,.mega-liste li.actif > a{background:rgba(102,0,51,.07);color:inherit}
.mega-ph{
  flex:0 0 64px;width:64px;height:64px;border-radius:12px;background-size:cover;background-position:center;
  border:0;transition:transform .5s var(--t);
}
.mega-liste a:hover .mega-ph{transform:scale(1.05)}
.mega-ph-geo{display:grid;place-items:center;background:var(--encre);color:var(--rouge-v)}
.mega-ph-geo svg{width:30px;height:30px}
.mega-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mega-txt b{font-family:var(--disp);font-size:14.5px;font-weight:600;color:var(--bordeaux);letter-spacing:-.01em;line-height:1.25;transition:color .3s}
.mega-liste a:hover .mega-txt b,.mega-liste li.actif > a .mega-txt b{color:var(--bordeaux-f)}
.mega-txt span{font-size:12.5px;color:var(--gris);line-height:1.4}
.mega-aside{
  background:var(--papier);border-left:1px solid var(--bord);border-radius:0 22px 22px 0;
  padding:22px 24px;display:flex;flex-direction:column;gap:12px;justify-content:center;
}
.mega-aside p{font-size:13.5px;color:var(--gris-f);line-height:1.5}
/* les boutons de la colonne : les regles generales du menu (.nav a) ne doivent pas les recolorer */
.mega-aside .btn{align-self:flex-start;display:inline-flex;padding:12px 22px;border-radius:99px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mega-aside .btn-r,.mega-aside .btn-r:hover{color:#fff;background:var(--bordeaux)}
.mega-aside .btn:not(.btn-r){color:var(--bordeaux);background:transparent}
.mega-aside .btn:not(.btn-r):hover{color:#fff;background:var(--bordeaux)}
.mega-aside a.mega-tel,.mega-aside a.mega-tel:hover{background:none;padding:0;text-transform:none;letter-spacing:0}
.mega-tel{font-family:var(--disp);font-weight:700;color:var(--encre);font-size:15px}
.mega-tel:hover{color:var(--bordeaux)}
@media(min-width:1121px) and (max-width:1320px){
  .mega-liste{grid-template-columns:repeat(2,1fr)}
  .mega-in{grid-template-columns:1fr 250px}
}

/* ---------- Menu sur petit ecran : un panneau sous la pilule ---------- */
@media(max-width:1120px){
  .nav-p{display:none}
  .header.ouvert .nav-p{
    display:block;position:fixed;left:var(--marge);right:var(--marge);top:92px;
    max-height:calc(100vh - 124px);overflow:auto;z-index:99;
    background:rgba(255,255,255,.98);border:1px solid var(--bord);border-radius:24px;
    padding:14px;box-shadow:0 30px 70px -30px rgba(16,18,21,.55);
  }
  .header.ouvert .nav{display:flex;flex-direction:column;align-items:stretch;gap:2px}
  .header.ouvert .nav a{font-size:16px;padding:12px 16px}
  .a-sous{flex-wrap:wrap}
  .a-sous > a{flex:1}
  .sous-b{display:none}
  /* toutes les pages restent visibles : les sous-menus sont deplies */
  .sous{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:1px solid var(--bord);border-radius:0;padding:0 0 6px 10px;margin:2px 0 6px 16px;
    min-width:0;width:calc(100% - 16px);background:transparent;backdrop-filter:none;
  }
  .header.ouvert .sous a{font-size:15px;padding:10px 14px}
  .a-sous::after{display:none}
  .burger[aria-expanded="true"] i{background:transparent}
  .burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
  .burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
  .burger i::before,.burger i::after{transition:top .25s var(--t),transform .25s var(--t)}
  body.menu-ouvert{overflow:hidden}
}
@media(max-width:560px){.header.ouvert .nav-p{top:76px}}
@media(max-width:1120px){.header.ouvert .nav a{text-transform:none;letter-spacing:0;font-weight:500}}

/* ---------- Haut de page interieure ---------- */
.hero-page{position:relative;padding:clamp(124px,16vh,182px) 0 clamp(46px,6vw,80px);background:var(--blanc);overflow:hidden}
/* la griffe, en accent, comme sur l'accueil */
.hero-page::after{
  content:"";position:absolute;left:-6%;top:8%;width:min(40vw,560px);aspect-ratio:1100/1172;
  background:var(--griffes) no-repeat center/contain;opacity:.10;pointer-events:none;transform:rotate(-8deg);
}
@media(max-width:1000px){.hero-page::after{opacity:.07;left:-18%;top:2%}}
.hero-page .wrap{position:relative;z-index:2}
.ariane{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--gris);margin-bottom:26px;letter-spacing:.02em}
.ariane a{color:var(--gris-f);transition:color .3s}
.ariane a:hover{color:var(--bordeaux)}
.ariane span{opacity:.5}
.ariane b{font-weight:600;color:var(--encre)}
.hp-grille{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4.5vw,64px);align-items:center}
@media(max-width:940px){.hp-grille{grid-template-columns:1fr;gap:34px}}
/* Les boutons du haut de page : .hero-act est masque tant que le bloc d'accueil n'a pas
   recu sa classe .go, ce qui n'arrive que sur la page d'accueil. Sur les pages interieures
   il faut donc les rendre visibles, sinon les deux appels a l'action disparaissent. */
.hero-page .hero-act{opacity:1;transform:none}
.hero-page .sur{margin-bottom:20px;background:rgba(102,0,51,.07);border:1px solid rgba(102,0,51,.22);padding:9px 17px;border-radius:99px}
.hero-page .sur::before{display:none}
.hero-page h1{font-size:clamp(2.05rem,4.4vw,3.7rem);font-weight:800;margin-bottom:20px;max-width:16ch}
.hero-page h1 em{font-style:normal;color:var(--rouge)}
.hero-page p.ch{font-size:clamp(1rem,1.25vw,1.12rem);color:var(--gris);max-width:54ch;margin-bottom:30px}
/* les trois points cote a cote, en colonnes (demande du 10/09/2026) */
.hp-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px;margin-top:34px;padding-top:6px}
@media(max-width:620px){.hp-points{grid-template-columns:1fr}}
.hp-points span{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.4;color:var(--gris-f);font-weight:500}
.hp-points span::before{content:"";width:12px;height:12px;margin-top:3px;background:var(--patte-r) no-repeat center/contain;flex:0 0 12px}
.hp-ph{
  position:relative;aspect-ratio:4/3;border-radius:26px;overflow:hidden;
  background-size:cover;background-position:center;border:1px solid var(--bord);
  box-shadow:0 40px 90px -44px rgba(16,18,21,.55);
}
.hp-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,18,21,0) 55%,rgba(16,18,21,.42))}
.hp-ph .etiq{
  position:absolute;left:18px;bottom:18px;z-index:2;background:rgba(255,255,255,.95);color:var(--encre);
  font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:12px;line-height:1.35;max-width:calc(100% - 36px);
}
.hp-ph .etiq em{font-style:normal;color:var(--rouge)}
@media(max-width:940px){.hp-ph{aspect-ratio:16/10;max-width:640px}}
/* la video dans le cadre du haut de page : meme cadre que la photo, la video par-dessus */
.hp-video{aspect-ratio:16/9;background-color:var(--encre)}
.hp-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:var(--encre)}
.hp-video::after{z-index:2;pointer-events:none}
.hp-video .etiq{z-index:3}
.video-son{
  position:absolute;right:16px;top:16px;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(16,18,21,.55);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px);
  transition:background .3s var(--t),border-color .3s var(--t),transform .3s var(--t);
}
.video-son[hidden]{display:none}
.video-son:hover{background:var(--bordeaux);border-color:var(--bordeaux);transform:scale(1.06)}
.video-son svg{width:18px;height:18px;grid-area:1/1}
.video-son .on{display:none}
.video-son[aria-pressed="true"] .on{display:block}
.video-son[aria-pressed="true"] .off{display:none}
@media(max-width:940px){.hp-video{aspect-ratio:16/9;max-width:640px}}

/* ---------- Haut de page sombre des prestations (10/09/2026, d'apres afalence.com) ----------
   Fond anime : la panthere neon des trois premieres secondes de la video de l'agence,
   en boucle et en muet, chargee seulement quand elle arrive a l'ecran. */
.hero-page.sombre{background:var(--encre)}
.hero-page.sombre::after{display:none}
.hero-fond{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-fond video{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-fond::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,18,21,.96) 30%,rgba(16,18,21,.55) 75%,rgba(16,18,21,.85));
}
/* le prefixe #contenu est necessaire : sans lui, la regle generale « tout le texte en noir »
   l'emporterait et le texte deviendrait illisible sur ce fond sombre */
#contenu .hero-page.sombre :is(h1,h2,h3){color:#fff}
#contenu .hero-page.sombre p,#contenu .hero-page.sombre p.ch,
#contenu .hero-page.sombre .hp-points span{color:rgba(255,255,255,.88)}
#contenu .hero-page.sombre p b{color:#fff}
.hero-page.sombre .hp-points{border-top-color:rgba(255,255,255,.18)}
#contenu .hero-page.sombre .ariane a,#contenu .hero-page.sombre .ariane b{color:rgba(255,255,255,.9)}
#contenu .hero-page.sombre .ariane a:hover{color:var(--rouge-v)}
.hero-page.sombre .sur{color:var(--rouge-v);background:rgba(204,102,153,.12);border-color:rgba(204,102,153,.34)}
.hero-page.sombre .hp-points span::before{filter:brightness(2.2)}
.hero-page.sombre .btn{border-color:rgba(255,255,255,.42);color:#fff}
.hero-page.sombre .btn i{background:#fff}
.hero-page.sombre .btn:hover{color:var(--encre);border-color:#fff}
.hero-page.sombre .btn-r{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff}
.hero-page.sombre .btn-r i{background:#fff}
.hero-page.sombre .btn-r:hover{color:var(--encre);border-color:#fff}
.hero-page.sombre .hp-ph{border-color:rgba(255,255,255,.16)}
@media(prefers-reduced-motion:reduce){.hero-fond video{display:none}}

/* Variante griffes : trois coups de griffe rouges qui se tracent l'un apres l'autre.
   La forme vient de griffes.png, utilisee comme masque, et la couleur du degrade bordeaux. */
.hero-griffes{background:radial-gradient(120% 120% at 18% 0%,#1B1F24 0%,#0B0E11 68%)}
.hero-griffes i{
  position:absolute;display:block;pointer-events:none;opacity:0;
  /* les griffes gardent leur degrade rouge : c'est un graphisme, pas du texte */
  background:linear-gradient(130deg,#A62E63 0%,var(--bordeaux) 55%,#3D001F 100%);
  -webkit-mask:var(--griffes) no-repeat center/contain;mask:var(--griffes) no-repeat center/contain;
  animation:coupDeGriffe 9s cubic-bezier(.19,1,.22,1) infinite;
  will-change:opacity,clip-path;
}
.hero-griffes i:nth-child(1){right:2%;top:-16%;width:min(46vw,620px);aspect-ratio:1100/1172;transform:rotate(-7deg)}
.hero-griffes i:nth-child(2){right:24%;top:22%;width:min(30vw,400px);aspect-ratio:1100/1172;transform:rotate(11deg);animation-delay:1.2s}
.hero-griffes i:nth-child(3){right:-8%;bottom:-24%;width:min(38vw,510px);aspect-ratio:1100/1172;transform:rotate(-19deg);animation-delay:2.4s}
@keyframes coupDeGriffe{
  0%{opacity:0;clip-path:inset(0 100% 0 0)}
  4%{opacity:.9;clip-path:inset(0 0 0 0)}
  50%{opacity:.7;clip-path:inset(0 0 0 0)}
  78%{opacity:0;clip-path:inset(0 0 0 0)}
  100%{opacity:0;clip-path:inset(0 100% 0 0)}
}
@media(max-width:900px){.hero-griffes i:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){
  .hero-griffes i{animation:none;opacity:.55;clip-path:none}
}

/* ---------- Corps de page : grilles, cartes, puces ---------- */
.tete h2{max-width:20ch}
.grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,24px)}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.grille-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px)}
@media(max-width:1000px){.grille-3,.grille-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grille-2,.grille-3,.grille-4{grid-template-columns:1fr}}
.carte{
  position:relative;background:var(--blanc);border:1px solid var(--bord);border-radius:16px;padding:clamp(22px,2.2vw,32px);
  isolation:isolate;overflow:hidden;transition:transform .6s var(--t),border-color .5s var(--t),box-shadow .5s var(--t);
}
.carte::before{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--rouge);transition:width .7s var(--t)}
.carte:hover{transform:translateY(-5px);border-color:var(--bord-f);box-shadow:0 26px 50px -30px rgba(16,18,21,.35)}
.carte:hover::before{width:100%}
.carte .num{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--rouge);display:block;margin-bottom:16px}
.carte h3{font-size:clamp(1.08rem,1.5vw,1.32rem);margin-bottom:10px}
.carte p{font-size:14.8px;color:var(--gris)}
.carte p + p{margin-top:10px}
.gris .carte{background:var(--blanc)}
.noir .carte{background:#15181D;border-color:rgba(255,255,255,.11)}
.noir .carte h3{color:#fff}
.noir .carte p{color:rgba(255,255,255,.62)}
.noir .carte:hover{border-color:rgba(255,255,255,.28)}
.puces{margin:14px 0 0}
.puces li{list-style:none;font-size:14.5px;color:var(--gris-f);padding-left:26px;position:relative;margin-bottom:9px;line-height:1.5}
.puces li::before{content:"";position:absolute;left:0;top:5px;width:13px;height:13px;background:var(--patte-r) no-repeat center/contain;opacity:.9}
.puces li b{color:var(--encre);font-weight:600}
.noir .puces li{color:rgba(255,255,255,.84)}
.noir .puces li b{color:#fff}

/* texte courant a cote d'une image */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center}
@media(max-width:900px){.duo{grid-template-columns:1fr;gap:28px}}
.duo.inverse > :first-child{order:2}
@media(max-width:900px){.duo.inverse > :first-child{order:0}}
.duo h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin:16px 0 18px;max-width:20ch}
.duo h3{font-size:1.12rem;margin:22px 0 8px}
.duo p{color:var(--gris);margin-bottom:14px}
.duo p b{color:var(--encre);font-weight:600}
.duo-img{border-radius:18px;overflow:hidden;aspect-ratio:4/3;background-size:cover;background-position:center;border:1px solid var(--bord)}
.duo-img.carre{aspect-ratio:1}

/* chiffres */
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
@media(max-width:620px){.chiffres{grid-template-columns:1fr}}
.chiffre{padding:clamp(22px,2.4vw,34px);border:1px solid var(--bord);border-radius:16px;background:var(--blanc)}
.chiffre b{display:block;font-family:var(--disp);font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;color:var(--encre);letter-spacing:-.04em;line-height:1;margin-bottom:10px}
.chiffre b em{font-style:normal;color:var(--rouge)}
.chiffre span{font-size:14px;color:var(--gris);line-height:1.5;display:block}
.noir .chiffre{background:#15181D;border-color:rgba(255,255,255,.11)}
.noir .chiffre b{color:#fff}
.noir .chiffre span{color:rgba(255,255,255,.62)}

/* ---------- Cartes empilees au defilement (effet repere par Nathalie sur afalence.com, 10/09/2026) ----------
   Le titre de gauche reste en place (sticky) pendant que les cartes de droite, elles aussi sticky
   au meme point, viennent se poser les unes sur les autres. CSS pur ; site.js ajoute seulement
   un leger retrait des cartes recouvertes. */
.empile{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start}
.empile-titre{position:sticky;top:clamp(100px,14vh,140px)}
.empile-titre h2{font-size:clamp(1.9rem,4.2vw,3.5rem);margin:18px 0 14px;max-width:14ch}
.empile-titre > p{color:var(--gris);max-width:42ch}
.empile-titre .meth-img{margin-top:30px;max-width:440px}
.empile-cartes{display:flex;flex-direction:column;gap:clamp(70px,12vh,130px);padding-bottom:clamp(20px,4vh,40px)}
.empile-carte{
  --i:0;position:sticky;top:calc(clamp(100px,14vh,140px) + var(--i) * 16px);
  background:var(--blanc);border:1px solid var(--bord);border-radius:22px;
  padding:clamp(24px,3vw,40px);min-height:clamp(250px,34vh,360px);
  box-shadow:0 34px 64px -40px rgba(16,18,21,.5);
  transform-origin:50% 0;will-change:transform;
}
/* cartes blanches, avec une photo par etape (demande du 10/09/2026) */
.empile-carte{background:var(--blanc);border-color:var(--bord)}
.empile-carte .num{display:block;font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--bordeaux);margin-bottom:14px}
.empile-carte h3{font-size:clamp(1.25rem,2vw,1.7rem);margin-bottom:12px;max-width:22ch}
/* dans les cartes, le texte est un cran plus petit que le corps de texte courant */
#contenu .empile-carte p{font-size:.9rem;line-height:1.55;max-width:52ch}
#contenu .carte p,#contenu .autre p,#contenu .offre p,#contenu .tarif-liste p,
#contenu .carte .puces li,#contenu .offre .puces li,#contenu .tarif-carte .puces li{font-size:.9rem;line-height:1.55}
.empile-carte.avec-photo{
  display:grid;grid-template-columns:31% 1fr;gap:clamp(34px,4.5vw,64px);
  align-items:center;padding:clamp(26px,2.8vw,38px);
}
/* le bloc de texte garde sa propre marge, pour ne pas venir toucher la photo */
.empile-carte.avec-photo > div:last-child{padding-left:clamp(4px,.6vw,10px)}
.empile-photo{
  border-radius:14px;overflow:hidden;background-size:cover;background-position:center;
  aspect-ratio:4/3;min-height:170px;border:1px solid var(--bord);
}
@media(max-width:760px){
  .empile-carte.avec-photo{grid-template-columns:1fr;gap:16px}
  .empile-photo{aspect-ratio:16/9;min-height:0}
}
.empile-carte p + p{margin-top:10px}
.empile-carte::before{content:"";position:absolute;top:0;left:0;height:3px;width:100%;background:var(--bordeaux);border-radius:22px 22px 0 0;opacity:.9}
.noir .empile-carte{background:#15181D;border-color:rgba(255,255,255,.12)}
.noir .empile-carte h3{color:#fff}
.noir .empile-carte p{color:rgba(255,255,255,.66)}
.noir .empile-titre h2{color:#fff}
@media(max-width:900px){
  .empile{grid-template-columns:1fr;gap:26px}
  .empile-titre{position:static}
  .empile-titre .meth-img{display:none}
  .empile-cartes{gap:clamp(40px,8vh,80px)}
  .empile-carte{top:calc(92px + var(--i) * 10px);min-height:0}
}
@media(prefers-reduced-motion:reduce){.empile-carte{position:static}}

/* etapes : on reprend .et de l'accueil, en pleine largeur */
.etapes{max-width:860px}
.etapes .et h3{font-size:1.16rem}

/* le forfait */
.tarif{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(18px,2.4vw,32px);align-items:start}
@media(max-width:900px){.tarif{grid-template-columns:1fr}}
.tarif-carte{
  position:relative;background:var(--encre);color:#fff;border-radius:22px;padding:clamp(26px,3vw,42px);overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.tarif-carte::after{content:"";position:absolute;right:-12%;bottom:-18%;width:60%;aspect-ratio:520/538;background:var(--patte-n) no-repeat center/contain;opacity:.08;filter:invert(1);transform:rotate(12deg);pointer-events:none}
.tarif-carte .sur{color:var(--rouge-v)}
.tarif-carte .sur::before{background:var(--rouge-v)}
.tarif-carte .prix-g{display:flex;align-items:baseline;gap:8px;margin:18px 0 6px}
.tarif-carte .prix-g b{font-family:var(--disp);font-size:clamp(2.6rem,5vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.tarif-carte .prix-g span{font-size:14px;color:rgba(255,255,255,.62)}
.tarif-carte .sans{font-size:13.5px;color:rgba(255,255,255,.62);margin-bottom:24px}
.tarif-carte .puces li{color:rgba(255,255,255,.86)}
.tarif-carte .puces li b{color:#fff}
.tarif-carte .btn{margin-top:26px}
.tarif-liste{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.tarif-liste{grid-template-columns:1fr}}
.tarif-liste div{background:var(--blanc);border:1px solid var(--bord);border-radius:14px;padding:18px 20px}
.tarif-liste h3{font-size:1rem;margin-bottom:6px}
.tarif-liste p{font-size:13.8px;color:var(--gris)}

/* realisations liees */
.trav.trois{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.trav.trois{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.trav.trois{grid-template-columns:1fr}}

/* questions frequentes */
.faq{max-width:860px}
.faq-q{border-top:1px solid var(--bord);padding:4px 0}
.faq-q:last-child{border-bottom:1px solid var(--bord)}
.faq-q summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:20px 0;font-family:var(--disp);font-weight:600;font-size:clamp(1rem,1.3vw,1.14rem);color:var(--encre);letter-spacing:-.015em;
  transition:color .3s;
}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{
  content:"";flex:0 0 30px;width:30px;height:30px;border-radius:50%;border:1px solid var(--bord-f);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101215' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center/13px;
  transition:transform .4s var(--t),background-color .3s,border-color .3s;
}
.faq-q summary:hover{color:var(--bordeaux)}
.faq-q[open] summary::after{transform:rotate(45deg);background-color:rgba(102,0,51,.08);border-color:var(--rouge)}
.faq-q .rep{padding:0 0 22px;max-width:70ch;color:var(--gris);font-size:15.5px}
.faq-q .rep p + p{margin-top:10px}
.faq-q .rep a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:3px}

/* nos autres prestations */
.autres{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(12px,1.4vw,20px)}
@media(max-width:1000px){.autres{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.autres{grid-template-columns:1fr}}
.autre{
  position:relative;display:block;background:var(--blanc);border:1px solid var(--bord);border-radius:16px;padding:24px;
  transition:transform .6s var(--t),border-color .5s var(--t),box-shadow .5s var(--t);
}
.autre:hover{transform:translateY(-5px);border-color:var(--bord-f);box-shadow:0 26px 50px -30px rgba(16,18,21,.35)}
.autre .num{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--rouge);display:block;margin-bottom:14px}
.autre h3{font-size:1.06rem;margin-bottom:8px;padding-right:40px}
.autre p{font-size:13.8px;color:var(--gris)}
.autre .fleche{
  position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;border:1px solid var(--bord-f);
  display:grid;place-items:center;color:var(--encre);transition:background .4s var(--t),color .4s var(--t),border-color .4s var(--t);
}
.autre .fleche svg{width:15px;height:15px}
.autre:hover .fleche{background:var(--rouge);border-color:var(--rouge);color:#fff}

/* bandeau d'appel discret en bas d'une section */
.appel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:clamp(30px,4vw,54px);padding:22px 26px;border:1px solid var(--bord);border-radius:18px;background:var(--blanc)}
.appel p{font-size:15px;color:var(--gris-f);max-width:60ch}
.appel p b{color:var(--encre)}
.noir .appel{background:#15181D;border-color:rgba(255,255,255,.12)}
.noir .appel p{color:rgba(255,255,255,.7)}
.noir .appel p b{color:#fff}

/* ---------- Les trois formats de site, illustres par de vrais sites (10/09/2026) ----------
   Chaque carte porte un cadre de navigateur : au survol, la capture defile de haut en bas,
   comme si le visiteur parcourait le site. */
/* le chapo de cette section passe sous le titre, sur toute la largeur (10/09/2026) */
.offres-sec .tete{display:block}
#contenu .offres-sec .tete p{max-width:none;margin-top:16px}
.offres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
@media(max-width:1000px){.offres{grid-template-columns:1fr;max-width:640px;margin:0 auto}}
.offre{
  position:relative;display:flex;flex-direction:column;background:var(--blanc);border-radius:22px;
  border:1px solid var(--bord);padding-bottom:6px;
  transition:transform .6s var(--t),border-color .6s var(--t),box-shadow .6s var(--t);
}
.offre:hover{transform:translateY(-8px);border-color:rgba(102,0,51,.4);box-shadow:0 44px 80px -44px rgba(16,18,21,.5)}
.offre-ecran{
  position:relative;margin:16px 16px 0;border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 18px 40px -22px rgba(16,18,21,.55);
}
.offre-barre{height:28px;background:#22262C;display:flex;align-items:center;gap:6px;padding:0 12px}
.offre-barre i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.24);flex:0 0 8px}
.offre-barre span{
  margin-left:10px;font-family:var(--txt);font-size:10.5px;letter-spacing:.04em;
  color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.offre-vue{
  height:clamp(220px,26vw,300px);background-size:100% auto;background-position:center top;
  background-repeat:no-repeat;background-color:#fff;
  transition:background-position 6s cubic-bezier(.32,0,.28,1);
}
.offre:hover .offre-vue{background-position:center bottom}
/* la pastille qui invite a survoler, effacee des que la souris arrive */
.offre-ecran::after{
  content:"Survolez pour parcourir le site";
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  background:rgba(16,18,21,.82);color:#fff;font-size:11px;letter-spacing:.04em;
  padding:7px 14px;border-radius:99px;white-space:nowrap;pointer-events:none;
  transition:opacity .4s var(--t);
}
.offre:hover .offre-ecran::after{opacity:0}
@media(pointer:coarse){.offre-ecran::after{content:"Un vrai site que nous avons construit"}}
.offre-txt{padding:22px clamp(20px,2vw,28px) 8px;display:flex;flex-direction:column;flex:1}
.offre-num{
  font-family:'TAN Ashford','Playfair Display',Georgia,serif;font-size:2.4rem;font-weight:700;
  color:var(--bordeaux);line-height:1;display:block;margin-bottom:6px;
}
.offre h3{font-size:clamp(1.25rem,1.8vw,1.6rem);margin-bottom:8px}
/* l'accroche doit passer devant la regle generale qui met tous les paragraphes en noir */
#contenu .sec:not(.noir):not(.cta) .offre .offre-accroche,
#contenu .offre .offre-accroche{color:var(--bordeaux);font-weight:600;margin-bottom:10px}
.offre-lien{
  margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--encre);
  transition:color .35s var(--t),gap .35s var(--t);
}
.offre-lien svg{width:14px;height:14px}
.offre-lien:hover{color:var(--bordeaux);gap:15px}
@media(prefers-reduced-motion:reduce){.offre-vue{transition:none}}

/* ---------- Les six cartes de prestations : fond blanc sur la section noire (11/09/2026) ---------- */
.noir .pr{background:var(--blanc);border-color:var(--bord)}
.noir .pr::after{background:var(--papier)}
.noir .pr:hover{border-color:var(--bord-f);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
#contenu .noir .pr h3{color:var(--bordeaux)}
#contenu .noir .pr p,#contenu .noir .pr li{color:#000}
.noir .pr .num,.noir .pr:hover .num{color:var(--bordeaux)}
.noir .pr .lien{color:var(--encre);border-color:var(--bord-f)}
.noir .pr:hover .lien{border-color:var(--bordeaux)}
.noir .pr .lien-2{color:var(--gris);text-decoration-color:var(--bord-f)}
.noir .pr .lien-2:hover{color:var(--bordeaux);text-decoration-color:var(--bordeaux)}

/* ---------- Six prestations sur l'accueil : trois par ligne (11/09/2026) ---------- */
.presta .pr{grid-column:span 2}
/* toutes les vignettes au meme format, la sixieme comprise */
.presta .pr .pr-ph{aspect-ratio:1.55}
@media(max-width:1000px){.presta .pr,.presta .pr-1{grid-column:span 1 !important}}

/* ---------- Page realisations : 25 vignettes de sites clients ---------- */
.hero-page.mini p.ch{margin:18px 0 0;max-width:64ch}
/* vignettes epurees, d'apres afalence.com : image seule avec un degrade en bas, titre en dessous,
   une vignette sur sept en double hauteur pour casser la regularite */
.reals{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;grid-auto-flow:dense;gap:clamp(18px,2.4vw,34px) clamp(14px,1.8vw,26px)}
@media(max-width:1000px){.reals{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.reals{grid-template-columns:1fr}}
.real{display:flex;flex-direction:column;gap:12px}
.real-img{
  position:relative;display:block;flex:1;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  background-color:var(--papier-2);background-size:100% auto;background-position:top center;background-repeat:no-repeat;
  border:1px solid var(--bord);transition:background-size 1.1s var(--t),transform .6s var(--t),box-shadow .6s var(--t);
}
.real-img::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(16,18,21,0) 55%,rgba(16,18,21,.55) 100%);
  opacity:.9;transition:opacity .5s var(--t);
}
.real:hover .real-img{background-size:104% auto;transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(16,18,21,.45)}
.real:hover .real-img::after{opacity:1}
.real-txt{display:flex;flex-direction:column;gap:2px;padding:0 4px}
.real-txt b{font-family:var(--disp);font-size:1.08rem;font-weight:600;color:var(--encre);letter-spacing:-.02em;transition:color .3s}
.real:hover .real-txt b{color:var(--bordeaux)}
.real-txt span{font-size:13px;color:var(--gris);line-height:1.45}

/* ---------- Page contact ---------- */
.contact-grille{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(18px,2.4vw,32px);align-items:start}
@media(max-width:900px){.contact-grille{grid-template-columns:1fr}}
.contact-photo{aspect-ratio:4/3;border-radius:18px;background-size:cover;background-position:center;border:1px solid var(--bord);margin-bottom:16px}
.coord .rdv-bloc h4{margin-bottom:12px}
.coord .rdv-bloc p{font-size:15px;color:var(--gris-f)}
.coord .pied-adr{gap:14px}
.coord .pied-adr span{font-size:14.5px;line-height:1.55}
.coord .pied-adr b{display:block;font-weight:600;font-size:13.5px;margin-bottom:4px}
.form-web3 .rdv-etape:first-child h3{margin-top:0}

/* ---------- Pages legales et texte long ---------- */
.hero-page.mini{padding-bottom:clamp(26px,3vw,40px)}
.hero-page.mini h1{max-width:22ch}
.hero-page .maj{font-size:13px;color:var(--gris);margin-top:8px}
.legal{max-width:78ch;padding-bottom:clamp(60px,8vw,110px)}
.legal h2{font-size:clamp(1.35rem,2.2vw,1.75rem);margin:44px 0 14px}
.legal h3{font-size:1.12rem;margin:30px 0 10px}
.legal h4{font-size:1rem;margin:22px 0 8px}
.legal p{margin-bottom:14px;color:var(--gris-f)}
.legal ul{margin:0 0 16px 22px}
.legal li{margin-bottom:7px;color:var(--gris-f)}
.legal a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:3px}
.legal table{width:100%;border-collapse:collapse;font-size:14.5px;margin:6px 0 18px}
.legal th,.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--bord);vertical-align:top;color:var(--gris-f)}
.legal th{font-family:var(--disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre)}
.legal .encart{background:var(--papier);border:1px solid var(--bord);border-radius:14px;padding:18px 22px;margin:20px 0}
.legal .encart p:last-child{margin-bottom:0}
.legal address{font-style:normal;color:var(--gris-f);margin-bottom:14px;line-height:1.6}
.legal .fiche{display:grid;grid-template-columns:200px 1fr;gap:6px 18px;margin:0 0 18px}
@media(max-width:620px){.legal .fiche{grid-template-columns:1fr}}
.legal .fiche dt{font-weight:600;color:var(--encre);font-size:14.5px}
.legal .fiche dd{color:var(--gris-f);font-size:15px}

/* plan du site */
.plan{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);padding-bottom:clamp(60px,8vw,110px)}
@media(max-width:900px){.plan{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.plan{grid-template-columns:1fr}}
.plan h2{font-size:1.1rem;margin-bottom:14px}
.plan ul{margin:0 0 0 2px}
.plan li{list-style:none;margin-bottom:9px}
.plan a{color:var(--gris-f);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bord-f)}
.plan a:hover{color:var(--bordeaux)}

/* « + de 25 ans » : le compteur est dans un <i> a l'interieur du chiffre */
.hero-preuve div b i,.agence .sign div b i{font-style:normal}
/* les trois chiffres de la section agence, a la taille et a la couleur de ceux du haut de page */
.agence .sign div b{font-size:clamp(2.1rem,3vw,2.8rem);color:var(--bordeaux)}
.agence .sign{gap:34px}

/* ==========================================================
   CORPS DE TEXTE : 16 px et noir (demande de Nathalie du 10/09/2026)
   1 rem = 16 px. Tous les paragraphes et listes du contenu passent a 1 rem,
   en noir pur sur fond clair ; sur les fonds sombres (sections noires, bloc
   contact, carte forfait, pied de page) le texte reste clair.
   ========================================================== */
html{font-size:16px}
body{font-size:1rem}
#contenu p,#contenu li,#contenu .legal dd,#contenu .legal dt,#contenu .legal td,#contenu .legal address,
#contenu .faq-q .rep,#contenu .rdv-note,#contenu .hp-points span,#contenu .chiffre span,#contenu .adresses span,
#contenu .real-txt span,#contenu .tarif-liste p,#contenu .plan a{font-size:1rem;line-height:1.6}
#contenu .hero p.ch,#contenu .hero-page p.ch{font-size:1rem}
/* noir sur les fonds clairs */
#contenu .hero p,#contenu .hero-page p,#contenu .hp-points span,
#contenu .sec:not(.noir):not(.cta) p,#contenu .sec:not(.noir):not(.cta) li,
#contenu .sec:not(.noir):not(.cta) .faq-q .rep,#contenu .sec:not(.noir):not(.cta) .chiffre span,
#contenu .sec:not(.noir):not(.cta) .adresses span,#contenu .sec:not(.noir):not(.cta) .real-txt span,
#contenu .legal p,#contenu .legal li,#contenu .legal dd,#contenu .legal dt,#contenu .legal td,#contenu .legal address,
#contenu .plan a,#contenu .sec:not(.noir):not(.cta) p b,#contenu .legal p b{color:#000}
/* l'intitule en gras des encarts d'appel, en bordeaux ; eclairci sur les fonds sombres */
#contenu .sec:not(.noir):not(.cta) .appel p b{color:var(--bordeaux)}
#contenu .noir .appel p b,#contenu .cta .appel p b,#contenu .appel p b{color:#fff}
#contenu .sec:not(.noir):not(.cta) .appel p b{color:var(--bordeaux)}
/* Tous les textes en noir pur, menu compris (demande du 10/09/2026). Les deux gris du texte
   deviennent du noir ; les titres et les elements de l'en-tete sont fixes explicitement.
   --encre n'est pas touche : il sert aussi de fond aux blocs sombres. */
:root{--gris:#000;--gris-f:#000}
.nav > li > a,.sous-b,.tel-h,.logo .mot b,.logo .mot em,.mega-txt span,.mega-aside p,.mega-tel,
.ariane a,.ariane b,.hp-ph .etiq,.burger i,.burger i::before,.burger i::after{color:#000}
.burger i,.burger i::before,.burger i::after{background:#000}
#contenu .faq-q summary,#contenu .creneau b,#contenu .rdv-champ label,#contenu .rdv-rgpd{color:#000}
/* titres en bordeaux (demande du 10/09/2026) ; bordeaux eclairci sur les fonds sombres */
#contenu .hero :is(h1,h2,h3),#contenu .hero .l b,#contenu .hero-page :is(h1,h2,h3),
#contenu .sec:not(.noir):not(.cta) :is(h1,h2,h3),#contenu .legal :is(h2,h3),#contenu .plan h2{color:var(--bordeaux)}
/* Essai du 11/09/2026 : tout ce qui etait rose clair passe en bordeaux, y compris
   les surtitres et les titres sur fond sombre. */
.noir .sur,.cta .sur,.tarif-carte .sur,.hero-page.sombre .sur,.pied .sur,.scene .sur{color:var(--bordeaux)}
.noir .sur::before,.cta .sur::before,.tarif-carte .sur::before,.pied .sur::before,.scene .sur::before{background:var(--bordeaux)}
.hero-page.sombre .sur{background:rgba(102,0,51,.16);border-color:rgba(102,0,51,.5)}
#contenu .noir :is(h2,h3),#contenu .cta h2,#contenu .tarif-carte :is(h2,h3){color:var(--bordeaux)}
/* le grand titre des sections sur fond noir reste en blanc */
#contenu .noir .tete h2,#contenu .cta h2{color:#fff}
#contenu .noir .tete p,#contenu .cta .tete p{color:rgba(255,255,255,.84)}
.pied-col h4{color:var(--bordeaux)}
.offre-lien:hover{color:var(--bordeaux)}
#contenu .sec:not(.noir):not(.cta) .carte h3,#contenu .sec:not(.noir):not(.cta) .autre h3,#contenu .tarif-liste h3{color:var(--bordeaux)}
/* les blocs sombres poses dans une section claire gardent leur texte clair */
#contenu .tarif-carte p,#contenu .tarif-carte li,#contenu .tarif-carte li b{color:rgba(255,255,255,.88)}
#contenu .tarif-carte .sans{color:rgba(255,255,255,.66)}
#contenu .rdv-bloc .num{color:#fff}
/* la pastille des chiffres cles et les legendes courtes restent telles quelles */

/* la panthere qui traverse la page : sans le trait au sol ni les empreintes (demande du 10/09/2026) */
.sep-panthere::after,.sep-panthere .pas-piste{display:none}

/* Titres en TAN Ashford (demande du 10/09/2026). Police commerciale, absente du poste :
   des que le fichier tan-ashford.woff2 (ou .otf) est depose dans assets/fonts/, il est utilise.
   En attendant, Bodoni Moda (deja chargee pour le logo) fait office de serif de remplacement. */
@font-face{
  font-family:'TAN Ashford';
  src:url('../fonts/tan-ashford.woff2') format('woff2'),url('../fonts/tan-ashford.otf') format('opentype');
  font-weight:400 800;font-display:swap;
}
h1,h2,h3{font-family:'TAN Ashford','Playfair Display',Georgia,serif;font-weight:700;letter-spacing:0;line-height:1.12}
.hero h1,.hero-page h1{font-weight:700}
.hero h1 .l b{font-weight:700}
.real-txt b,.tel-fiche .nm,.ec-nom b,.bot-tete .qui b{font-family:var(--disp)}
/* les titres des cartes du mega menu suivent la police des titres */
.mega-txt b{font-family:'TAN Ashford','Playfair Display',Georgia,serif;font-size:16.5px;font-weight:700;letter-spacing:0}

/* Coupure des titres (demande du 10/09/2026) : lignes equilibrees, aucun mot coupe en deux,
   noms composes insecables. Les mots courts sont colles a leur voisin par le script build. */
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}
.mot-w,.nb{white-space:nowrap}
/* les titres ont besoin d'un peu plus de largeur pour accueillir ces groupes insecables */
.tete h2,.empile-titre h2,.bureaux h2,.agence h2,.duo h2{max-width:26ch}
.hero-page h1,.cta h2{max-width:22ch}
.carte h3,.empile-carte h3,.autre h3{max-width:26ch}

/* Titres : reduits d'un quart puis legerement reagrandis (demandes du 10/09/2026) */
.hero h1{font-size:clamp(2.2rem,4.4vw,3.8rem)}
/* la borne basse tient compte du plus long nom insecable, « Alpes-de-Haute-Provence »,
   qui doit rentrer dans un ecran de telephone sans deborder */
.hero-page h1{font-size:clamp(1.5rem,3.5vw,3rem)}
@media(max-width:360px){.nb{white-space:normal}}
.tete h2,.empile-titre h2{font-size:clamp(1.7rem,3.3vw,2.8rem)}
.cta h2{font-size:clamp(1.75rem,3.5vw,3rem)}
.bureaux h2,.agence h2,.duo h2{font-size:clamp(1.6rem,2.9vw,2.4rem)}
.empile-carte h3{font-size:clamp(1.2rem,1.75vw,1.5rem)}
.geant b{font-size:clamp(1.8rem,5vw,4rem)}

/* sans JavaScript, rien ne reste cache */
html:not(.js) .hero-page .rev{opacity:1;transform:none}

/* ==========================================================================
   ESSAI DU 14/09/2026
   1. Hero premium (panthere + mur de sites), classes prefixees hp-
   2. Corps de texte en Montserrat
   Le bordeaux #8E1520 etait deja en place partout dans le site.
   ========================================================================== */

/* --- 2. corps de texte en Montserrat --- */
:root{--txt:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif}

/* mode capture : ?test=1 coupe toutes les transitions, pour photographier la page au repos */
html.test *,html.test *::before,html.test *::after{transition-duration:0s!important;transition-delay:0s!important;animation-play-state:paused!important}

/* --- 1. hero premium --- */
.hp-hero{
  --hp-noir:#141417;--hp-encre:#141417;--hp-bordeaux:#8E1520;--hp-bordeaux-v:#E34453;
  --hp-gris-c:#A4A4A8;--hp-filet-s:rgba(255,255,255,.14);--hp-filet-sf:rgba(255,255,255,.35);
  --hp-serif:'Playfair Display',Georgia,serif;
  --hp-sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hp-ease:cubic-bezier(.16,1,.3,1);--hp-ease-io:cubic-bezier(.65,0,.35,1);
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--hp-noir);color:#fff;overflow:hidden;padding-top:clamp(100px,12vh,140px)
}
.hp-fond{position:absolute;inset:0;z-index:0}
/* la panthere du fond est remontee : la video deborde en haut du cadre */
.hp-hero .hp-video{position:absolute;left:0;right:0;top:-20%;bottom:auto;width:100%;height:120%;object-fit:cover;object-position:center 60%;opacity:.3;filter:saturate(.55)}
.hp-voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.96) 0%,rgba(11,11,12,.8) 40%,rgba(11,11,12,.3) 100%),linear-gradient(180deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,0) 30%,rgba(11,11,12,.9) 100%)}
.hp-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:240px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.55) 45%,rgba(11,11,12,0) 100%)}

.hp-mur{position:absolute;top:-8%;right:-7%;width:48%;height:118%;z-index:1;perspective:1500px;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 84%,transparent 100%)}
.hp-mur-in{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;transform:rotateX(14deg) rotateY(-16deg) rotateZ(6deg) translateZ(-120px);transform-style:preserve-3d;will-change:transform}
.hp-mur-col{overflow:hidden;height:100%}
.hp-mur-piste{display:flex;flex-direction:column;animation:hp-mur-defile 44s linear infinite}
.hp-mur-col-2 .hp-mur-piste{animation-direction:reverse;animation-duration:54s}
.hp-mur:hover .hp-mur-piste{animation-play-state:paused}
.hp-mur-ec{display:block;margin-bottom:24px;border-radius:8px;overflow:hidden;background:#1a1a1c;box-shadow:0 30px 60px -10px rgba(0,0,0,.6);outline:1px solid rgba(255,255,255,.06);transition:outline-color .4s}
.hp-mur-ec:hover{outline-color:rgba(255,255,255,.35)}
.hp-mur-ec img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top;display:block}
@keyframes hp-mur-defile{to{transform:translateY(-50%)}}

.hp-in{position:relative;z-index:3;padding-bottom:clamp(44px,7vh,96px);padding-top:clamp(40px,8vh,90px);width:100%}
.hp-in>*{max-width:min(940px,64vw)}
.hp-sur{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-family:var(--hp-sans);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--hp-bordeaux-v);margin:0 0 34px;max-width:min(760px,52vw)}
.hp-sur::before{content:"";width:26px;height:1px;background:currentColor;flex:0 0 auto}
.hp-sur i{font-style:normal;color:var(--hp-gris-c)}
/* le site impose h1{font-weight:700;line-height:1.12} plus bas dans sa feuille :
   on redit tout ici, sur les spans compris, sinon les deux lignes s'ecartent */
.hp-h1{font-family:var(--hp-serif);font-weight:500;font-size:clamp(2.3rem,5.3vw,5.4rem);line-height:.98;letter-spacing:-.01em;color:#fff;margin:0}
.hp-h1 em{font-style:italic;font-weight:400;color:var(--hp-bordeaux-v)}
.hp-ligne{display:block;overflow:hidden;line-height:.98;padding-bottom:.14em;margin-bottom:-.14em}
.hp-ligne>span{display:block;line-height:.98;white-space:nowrap;font-weight:500;transform:translateY(112%);transition:transform 1.3s var(--hp-ease)}
.hp-ligne:nth-child(2)>span{transition-delay:.12s}
.hp-h1.in .hp-ligne>span{transform:none}
.hp-hero .hp-txt{max-width:560px;font-family:var(--hp-sans);font-size:1.12rem;line-height:1.6;color:rgba(255,255,255,.78);margin:34px 0 40px}
.hp-hero .hp-txt b{color:#fff;font-weight:600}
.hp-act{display:flex;align-items:center;gap:36px;flex-wrap:wrap}

.hp-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:22px 40px;border-radius:999px;font-family:var(--hp-sans);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid var(--hp-bordeaux);background:var(--hp-bordeaux);color:#fff;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .5s var(--hp-ease),border-color .5s var(--hp-ease),transform .5s var(--hp-ease)}
.hp-btn span{position:relative;z-index:1}
.hp-btn::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:#fff;transform:translateY(102%);transition:transform .65s var(--hp-ease);z-index:0}
.hp-btn:hover::before{transform:translateY(0)}
.hp-btn:hover{color:var(--hp-encre);border-color:#fff}
.hp-lien{display:inline-flex;align-items:center;gap:12px;font-family:var(--hp-sans);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#fff;position:relative;padding-bottom:6px}
.hp-lien::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform-origin:right;transform:scaleX(.35);transition:transform .6s var(--hp-ease)}
.hp-lien:hover::after{transform-origin:left;transform:scaleX(1)}
.hp-lien::before{content:"";width:9px;height:9px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);transition:transform .5s var(--hp-ease)}
.hp-lien:hover::before{transform:rotate(45deg) translate(3px,-3px)}

.hp-bas{position:relative;z-index:3;border-top:1px solid var(--hp-filet-s);background:rgba(11,11,12,.35)}
.hp-bas-in{display:flex;justify-content:flex-end;align-items:center;gap:24px;padding-top:18px;padding-bottom:18px;font-family:var(--hp-sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hp-defiler{display:flex;align-items:center;gap:14px;white-space:nowrap}
.hp-defiler i{width:1px;height:34px;background:var(--hp-filet-sf);position:relative;overflow:hidden}
.hp-defiler i::after{content:"";position:absolute;left:0;top:0;width:100%;height:50%;background:#fff;animation:hp-defiler 2s var(--hp-ease-io) infinite}
@keyframes hp-defiler{0%{transform:translateY(-100%)}60%,100%{transform:translateY(200%)}}
.hp-note{text-align:right}

@media (max-width:1180px){
  .hp-mur{width:56%;right:-14%}
  .hp-in>*{max-width:min(820px,64vw)}
}
@media (max-width:900px){
  .hp-mur{display:none}
  .hp-in>*{max-width:none}
  .hp-ligne>span{white-space:normal}
  .hp-bas{display:none}
  .hp-agence-ph img{height:100%}
  .hp-btn{padding:18px 30px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .hp-mur-piste{animation:none}
  .hp-ligne>span{transform:none;transition:none}
  .hp-defiler i::after{animation:none}
}


/* ---------- Le mot d'Alain, sur le fond clair de la section L'agence ----------
   Les tailles sont forcees : la feuille du site vise les paragraphes par
   identifiant, ce qu'aucune classe ne peut battre. */
.mot-alain{position:relative;margin:34px 0 0;padding:0;border:0}
.mot-alain::before{content:"\201C";position:absolute;left:-6px;top:-40px;
  font-family:'Playfair Display',Georgia,serif;font-weight:700;font-optical-sizing:none;
  font-size:88px;line-height:1;color:var(--rouge);opacity:.28;pointer-events:none}
.mot-alain p{position:relative;font-style:italic;font-size:16.5px!important;line-height:1.8!important;
  color:var(--encre)!important;margin:0}
.mot-alain .mot-sign{display:block;margin:18px 0 0;
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rouge)}
@media (max-width:900px){
  .mot-alain p{font-size:15.5px!important;line-height:1.72!important}
  .mot-alain::before{font-size:66px;top:-30px}
}

/* ---------- Bouton « haut de page » ----------
   Place a gauche de la bulle de l'assistant, sur la meme ligne : le panneau de
   l'assistant s'ouvre plus haut, les deux ne se marchent jamais dessus. */
.hp-haut{position:fixed;right:calc(clamp(14px,2vw,26px) + 74px);bottom:clamp(14px,2vw,26px);
  z-index:1190;width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,11,12,.78);color:#fff;border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s,transform .35s,visibility .35s,background .3s}
.hp-haut.vu{opacity:1;visibility:visible;transform:none}
.hp-haut:hover{background:var(--rouge);border-color:var(--rouge);transform:translateY(-3px)}
.hp-haut:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hp-haut svg{width:20px;height:20px}
@media (max-width:600px){
  .hp-haut{width:46px;height:46px;right:calc(clamp(14px,2vw,26px) + 62px)}
}
@media (prefers-reduced-motion:reduce){
  .hp-haut{transition:opacity .2s,visibility .2s;transform:none}
  .hp-haut.vu{transform:none}
}

/* ==========================================================================
   PIED DE PAGE, habillage premium pose sur celui du site (structure inchangee)
   ========================================================================== */
.pied{background:#141417;color:rgba(255,255,255,.68);padding-top:clamp(70px,8vw,120px);position:relative;overflow:hidden}
.pied-haut{grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.14)}
.pied-logo{width:150px;height:auto;margin-bottom:24px}
.pied p{font-size:14.5px;max-width:360px;line-height:1.6}
.pied-tel{display:inline-block;margin-top:20px;font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:1.45rem;color:#fff;text-decoration:none;letter-spacing:0}
.pied h4{font-family:'Montserrat',system-ui,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8E1520!important;margin-bottom:22px}
.pied-col nav a{display:block;font-size:14.5px;color:rgba(255,255,255,.72);text-decoration:none;padding:5px 0;transition:color .3s,padding-left .4s cubic-bezier(.16,1,.3,1)}
.pied-col nav a:hover{color:#fff;padding-left:8px}
.pied-adr span{display:block;font-size:14px;line-height:1.55;margin-bottom:18px}
.pied-adr b{display:block;color:#fff;margin-bottom:4px}
.pied-zones{padding:26px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:13.5px}
.pied-zones b{color:#E34453;font-weight:600;flex:none}
/* le grand AES en bas de page */
.hp-pied-geant{position:relative;height:clamp(100px,17vw,275px);overflow:hidden;pointer-events:none}
.hp-pied-geant span{position:absolute;left:50%;bottom:-.06em;transform:translateX(-50%);font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(8rem,26vw,27rem);line-height:1;letter-spacing:.06em;color:rgba(255,255,255,.055);white-space:nowrap}

/* ==========================================================================
   LOGO AGRANDI dans l'en-tete (demande du 14/09/2026)
   La panthere passe de 66 a 92 px, le lettrage suit dans les memes proportions.
   ========================================================================== */
.header .logo .fauve-img{height:92px!important;margin:-12px 0!important}
.header .logo .mot b{font-size:clamp(32px,2.9vw,40px)!important}
.header .logo .mot em{font-size:clamp(9px,.88vw,11.5px)!important;letter-spacing:.235em!important}
.header .barre{min-height:86px}
@media (max-width:1100px){
  .header .logo .fauve-img{height:74px!important;margin:-8px 0!important}
  .header .logo .mot b{font-size:clamp(26px,3.4vw,32px)!important}
}
/* Bodoni Moda est une police a taille optique variable : agrandie, ses dELies
   s'affinent et le lettrage parait delave. On fige la taille optique. */
.header .logo .mot b,.header .logo .mot em{font-optical-sizing:none;font-variation-settings:"opsz" 18}
/* le logo est descendu de quelques pixels dans la barre (demande du 14/09/2026) */
.header .logo{position:relative;top:8px}
@media (max-width:1100px){.header .logo{top:5px}}

/* ==========================================================================
   TITRES DE L'ACCUEIL : meme police que les pages du site (demande du 14/09/2026)
   Les pages affichent h1,h2,h3 en Bodoni Moda 700, sans interlettrage negatif.
   La taille optique est figee, sinon les delies s'affinent et le titre parait delave.
   ========================================================================== */
.hp-h1,.hp-h2,.hp-h2b,.hp-pile-txt h3,.hp-ligne>span{
  font-weight:700!important;letter-spacing:0!important;
  font-optical-sizing:none;font-variation-settings:"opsz" 28;
}
.hp-h1 em{font-weight:600!important;font-style:italic}

/* ==========================================================================
   CORRECTIF (defaut deja present dans le site, pas lie a la refonte de l'accueil)
   La regle #contenu .sec:not(.noir):not(.cta) :is(h1,h2,h3){color:var(--bordeaux)}
   ecrase le .tr-txt h3{color:#fff} des cartes de realisations : le nom du client
   s'affichait en bordeaux sur la photo, illisible. A reporter aussi dans _src.
   ========================================================================== */
#contenu .tr-txt h3{color:#fff!important}

/* ==========================================================================
   RETOUCHES DU 14/09/2026 (fin de journee)
   ========================================================================== */
/* le titre du haut de page ne doit jamais etre rogne : « a Manosque » touchait le bord */
.hp-h1{font-size:clamp(2.2rem,4.9vw,5rem)!important}
.hp-h1.in .hp-ligne{overflow:visible}

/* entre 1100 et 1400 px, le logo agrandi poussait le menu sur deux lignes */
@media (max-width:1400px){
  .header .logo .fauve-img{height:78px!important;margin:-6px 0!important}
  .header .logo .mot b{font-size:clamp(26px,2.4vw,32px)!important}
  .header .nav a{padding:9px 11px!important;font-size:13.5px!important}
  .header .tel-h{font-size:13px!important;white-space:nowrap}
}

/* « Ils nous font confiance » en plus gros */
.confiance-tete .sur{font-size:15px!important;letter-spacing:.18em!important}

/* « Comment ca se passe » en bordeaux, et tous les titres de section a la meme taille */
.hp-h2b{color:#8E1520!important}
.hp-h2,.hp-h2b{font-size:clamp(1.9rem,4.2vw,3.5rem)!important}

/* plus de filets autour de « Nous intervenons a », et le libelle en #8E1520 */
.pied-zones{border-bottom:0!important;border-top:0!important}
.pied-haut{border-bottom:0!important}
.pied-zones b{color:#8E1520!important}

/* ni le telephone ni le bouton ne doivent se couper en deux lignes */
.header .tel-h,.header .cta-h .btn,.header .cta-h .btn span{white-space:nowrap!important}
.header .cta-h{flex:0 0 auto}
@media (max-width:1320px){.header .tel-h{display:none!important}}

/* prestations : titre de section en #8E1520 comme les autres, et titres des six cartes alignes */
#contenu .sec.noir .tete h2{color:#8E1520!important}
#contenu .presta .pr h3{font-size:clamp(1.3rem,1.9vw,1.75rem)!important}

/* titre de la section L'agence en #8E1520 */
.hp-agence .hp-h2,#contenu .hp-agence :is(h1,h2,h3){color:#8E1520!important}
/* les chiffres de la section L'agence en #8E1520 */
.hp-sign div b{color:#8E1520!important}

/* le COM du logo en gras */
.header .logo .mot em i{font-weight:800!important}
/* haut de page : le suptitre et « a Manosque » en #8E1520 */
.hp-sur{color:#8E1520!important}
.hp-h1 em{color:#8E1520!important}
/* le suptitre du haut de page entierement en #8E1520, sans le filet devant */
.hp-sur,.hp-sur i{color:#8E1520!important}
.hp-sur::before{display:none!important}

/* ==========================================================================
   VARIANTE : en-tete foncee
   Transparente au-dessus du haut de page, elle devient noire des qu'on
   defile, pour rester lisible sur les sections claires. Le menu et le mega
   menu ne changent pas, seules les couleurs sont revues.
   ========================================================================== */
.header .barre{background:transparent!important;box-shadow:none!important;border-color:rgba(255,255,255,.12)!important}
.header.pose .barre{background:rgba(11,11,12,.88)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 12px 40px -22px rgba(0,0,0,.9)!important}

/* Le lettrage passe en clair. Le E et le COM prennent le bordeaux eclairci #E34453 :
   sur cette barre, qui reste sombre meme au defilement, le #8E1520 rendait le COM
   pratiquement invisible (choix de Nathalie du 14/09/2026). La version a en-tete
   claire, elle, garde bien le #8E1520. */
.header .logo .mot b,.header .logo .mot em{color:#fff!important;-webkit-text-fill-color:#fff!important}
.header .logo .mot b i,.header .logo .mot em i{color:#8E1520!important;-webkit-text-fill-color:#8E1520!important}

/* les liens du menu */
.header .nav>li>a,.header .sous-b,.header .tel-h,.header .nav a{color:rgba(255,255,255,.88)!important}
.header .nav>li>a:hover,.header .sous-b:hover{color:#fff!important;background:rgba(255,255,255,.09)!important}
.header .nav li.actif>a,.header .nav a[aria-current="page"]{color:#fff!important;background:#8E1520!important}
.header .tel-h svg{color:#8E1520!important}
.header .burger{border-color:rgba(255,255,255,.3)!important}
.header .burger i,.header .burger i::before,.header .burger i::after{background:#fff!important}

/* le mega menu garde son fond clair : on remet ses textes en sombre */
.header .sous.mega,.header .sous{color:#141417}
.header .sous a,.header .mega-txt b,.header .mega-txt span,.header .mega-liste a{color:inherit!important}
.header .mega-txt b{color:#8E1520!important}
.header .mega-tel{color:#141417!important}
/* les boutons du mega menu : ecriture blanche sur le bordeaux plein */
.header .sous .btn-r,.header .sous .btn-r span,.header .mega .btn-r,.header .mega .btn-r span{color:#fff!important}
.header .sous .btn:not(.btn-r),.header .sous .btn:not(.btn-r) span{color:#8E1520!important}
/* le COM de COMMUNICATION en blanc dans l'en-tete : en #8E1520 il disparaissait sur le noir */
.header .logo .mot em i{color:#fff!important;-webkit-text-fill-color:#fff!important}

/* Le COM du logo garde la couleur de la charte sur tous les fonds (choix du 15/09/2026).
   La regle d'en-tete blanchit tout le lettrage par -webkit-text-fill-color,
   qui passe devant color : on reprend les deux, et plus bas qu'elle. */
.header .logo .mot em i,.sombre .logo .mot em i{
  color:var(--rouge)!important;-webkit-text-fill-color:var(--rouge)!important}

/* Chiffres cles : libelles agrandis et fonces (15/09/2026), ils etaient illisibles */
.sign div span{font-size:15px!important;line-height:1.35!important;
  color:var(--gris-f)!important;letter-spacing:.01em!important}
.hp-sign div span{font-size:14.5px!important;line-height:1.35!important;
  color:rgba(255,255,255,.8)!important;letter-spacing:.02em!important}
@media (max-width:600px){
  .sign div span,.hp-sign div span{font-size:14px!important}
}

/* Panthere fixee au centre (choix du 15/09/2026) : plus de traversee au defilement */
.sep-panthere.anim span,.sep-panthere span{
  left:50%!important;transform:translateX(-50%)!important}

/* Bandeau des logos clients (15/09/2026) : intitule en gras, filet retire */
.confiance-tete .sur{font-weight:700!important}
.confiance-tete .sur::before{display:none!important}

/* ==========================================================================
   TITRES ARRONDIS (demande d'Alain du 15/09/2026)
   Meme police que « Creation de site » et « Fiche Google » dans le bandeau des
   metiers, c'est-a-dire Poppins. Le reglage de taille optique du Bodoni est
   annule, il n'a plus d'objet sur une police qui n'a pas d'axe opsz.
   ========================================================================== */
#contenu h1,#contenu h2,#contenu h3,
.hp-h1,.hp-h2,.hp-h2b,.hp-pile-txt h3,.hp-ligne>span,.hp-ligne em,
.hp-agence .hp-h2,.tete h2,.sec h2{
  font-family:'Playfair Display',Georgia,serif!important;
  font-weight:700!important;
  letter-spacing:-.008em!important;
  font-optical-sizing:auto!important;
  font-variation-settings:normal!important;
}
.hp-h1 em,.hp-ligne em,.hp-t2{font-style:italic!important;font-weight:700!important}

/* Lettrage du logo en Playfair (demande du 15/09/2026), comme les titres */
.logo .mot b,.logo .mot em,.chargeur-mot b,.chargeur-mot em,.pied-logo-lien .mot b{
  font-family:'Playfair Display',Georgia,serif!important;
  font-optical-sizing:auto!important;
  font-variation-settings:normal!important;
}

/* Le numero du pied suit le Playfair, comme les titres et le logo (15/09/2026) */
.pied-tel{font-family:'Playfair Display',Georgia,serif!important;font-weight:600!important}

/* Pied de page, retours du 17/09/2026 : textes agrandis, et le grand AES en filigrane
   reduit pour etre vu en entier (il etait coupe en haut et passait sous les mentions legales) */
.pied p{font-size:16px;max-width:380px}
.pied h4{font-size:13px}
.pied-col nav a{font-size:16px}
.pied-adr span{font-size:16px}
.pied-zones{font-size:16px;padding:32px 0}
.pied .l{font-size:16px;padding-top:28px}
.pied .l nav{gap:28px}
.hp-pied-geant{height:auto;overflow:visible;display:flex;justify-content:center;padding:clamp(20px,3vw,40px) 0 clamp(26px,3.5vw,50px)}
.hp-pied-geant span{position:static;transform:none;font-size:clamp(6rem,20vw,20rem);line-height:.8;padding-left:.06em}
/* la grille a 4 colonnes du pied ecrasait les regles tablette et mobile : on les repose apres */
@media(max-width:1100px){.pied-haut{grid-template-columns:1fr 1fr;gap:44px 40px}}
@media(max-width:560px){.pied-haut{grid-template-columns:1fr;gap:34px}}

/* ==========================================================================
   EN-TETE DES PAGES INTERIEURES (report du 23/09/2026, d'apres l'essai du 15/09)
   L'en-tete foncee est transparente au-dessus d'un haut de page sombre (accueil
   et six prestations). Sur les pages dont le haut est clair, elle est noire
   pleine des le depart, et le logo est reduit pour tenir dans la barre.
   ========================================================================== */
body:not(.accueil):not(.page-presta) .header .barre{background:rgba(20,20,23,.96)!important;
  box-shadow:0 12px 40px -22px rgba(0,0,0,.9)!important}
body:not(.accueil):not(.page-presta) .header .logo .fauve-img{height:76px!important;margin:-2px 0!important}
body:not(.accueil):not(.page-presta) .header .logo{top:2px}
body:not(.accueil):not(.page-presta) .header .barre{min-height:80px}
@media (max-width:1100px){
  body:not(.accueil):not(.page-presta) .header .logo .fauve-img{height:60px!important;margin:-1px 0!important}
  body:not(.accueil):not(.page-presta) .header .logo{top:1px}
  body:not(.accueil):not(.page-presta) .header .barre{min-height:66px}
}