@charset "utf-8";

/* ---------- Polices hebergees sur le serveur ----------
   Raleway : fichier variable, couvre les graisses 400 a 700.
   Licences : assets/fonts/LICENCE-*.txt */
@font-face{font-family:Raleway;font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/raleway.woff2) format("woff2-variations"),url(../assets/fonts/raleway.woff2) format("woff2")}
@font-face{font-family:Raleway;font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/raleway-italic-400.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/general-sans-400.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/general-sans-500.woff2) format("woff2")}
/* Papy Tech — feuille de style responsive
   Assistance informatique à domicile, Saint-Étienne.
   Points de rupture : 1440 (desktop) / 1100 (tablette) / 640 (mobile) */

:root{
  --green:#028A0F;
  --green-lt:#90D296;
  --green-hover:#016D0C;
  --ink:#262E27;
  --mint:#E7F5EA;
  --grey:#5A5A5A;
  --grey-2:#5A5A5A;
  --grey-3:#5A5A5A;
  --grad-btn:linear-gradient(109.125deg,#028A0F 0%,#2A8033 100%);
  --grad-logo:linear-gradient(114.228deg,#028A0F 0%,#90D296 100%);
  --grad-tile:linear-gradient(135deg,#028A0F 0%,#2E9B38 100%);
  --grad-band:linear-gradient(106.189deg,#028A0F 0%,#2A8033 100%);
  --gutter:100px;
  --rhythm:120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Raleway,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
h1,h2,h3,h4,p{margin:0}
img{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
a{color:var(--green);text-decoration:none}
/* focus global : tout element atteignable au clavier reste visible */
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
/* Focus sur fond vert : le contour vert y serait invisible */
.band :focus-visible,.plan--featured :focus-visible,.btn-contact:focus-visible,.btn--light:focus-visible{outline-color:#fff;outline-offset:3px}

/* Lien d'evitement : visible seulement au clavier */
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;padding:14px 22px;background:#fff;border:2px solid var(--green);border-radius:4px;font-weight:600;font-size:16px;line-height:1;color:var(--ink);transition:top .18s ease}
.skip-link:focus{top:16px;color:var(--ink)}
a:hover{color:var(--green-hover)}

/* ---------- Justification accessible ----------
   Le texte justifie etire les espaces entre les mots ; sur une colonne
   etroite cela creuse des "rivieres" verticales qui font perdre la
   ligne, en particulier aux lecteurs malvoyants, fatigues ou
   dyslexiques (WCAG 1.4.8). La cesure automatique referme ces trous :
   le navigateur coupe les mots longs selon les regles francaises, les
   pages etant en lang="fr".
   text-align:justify ne doit donc jamais etre pose seul : etendre la
   liste de selecteurs ci-dessous. */
p,
.sap-badge__texte,
.mentions-tarifs__devis,
.mentions-tarifs__ref,
.card__text,
.faq__answer p,
.legal__list li,
.checklist li{
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  hyphens:auto;
  -webkit-hyphenate-limit-before:3;
  -webkit-hyphenate-limit-after:3;
  -webkit-hyphenate-limit-lines:2;
  hyphenate-limit-chars:6 3 3;
  hyphenate-limit-lines:2;
  text-wrap:pretty;
}
/* Une colonne trop etroite ne peut pas etre justifiee proprement, meme
   avec cesure : sous 360 px le texte repasse en alignement a gauche. */
@media (max-width:360px){
  p,
  .sap-badge__texte,
  .mentions-tarifs__devis,
  .mentions-tarifs__ref,
  .card__text,
      .faq__answer p,
    .legal__list li,
  .checklist li{text-align:left;hyphens:none;-webkit-hyphens:none}
}

/* Exceptions : une ligne courte, un libelle ou un texte centre n'a rien a
   gagner d'une justification, et la cesure y couperait des mots isoles. */
.copyright,
.review p,
.review-author__org,
.field__label,
.form__notice,
.plan__price small,
.plan__note,
.plan__features li,
.plan__badge,
.plan__popular,
.switch__opt,
.retractation__ligne,
.retractation__champ,
.timeline__year-inline,
.mobile-nav a,
.nav-list a,
.footer-col a,
.video__titre,
.video__sous-titre,
.h-hero,.h-page,.h-section,.h-card,
h1,h2,h3,h4{text-align:inherit;hyphens:none;-webkit-hyphens:none}
.video__titre,.video__sous-titre{text-align:left}
.copyright,.review p{text-align:center}

.container{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- Typographie ---------- */
.h-hero{font-weight:700;font-size:60px;line-height:66px;color:#fff;text-wrap:balance}
.h-page{font-weight:700;font-size:60px;line-height:68px;color:#fff}
.h-section{font-weight:700;font-size:48px;line-height:58px;color:var(--ink)}
.h-card{font-weight:600;font-size:20px;line-height:20px;color:#1E1D24}
.lead{font-weight:400;font-size:1.125rem;line-height:1.45;color:var(--grey)}
.body-gs{font-family:"General Sans",Raleway,sans-serif;font-weight:400;font-size:1.125rem;line-height:1.55;color:var(--grey-2)}

/* ---------- Boutons ---------- */
.btn{display:inline-block;padding:16px 24px;background:var(--green);color:#fff;font-weight:700;font-size:16px;line-height:100%;border:0;cursor:pointer;transition:background .15s ease,filter .15s ease}
.btn:hover{background:var(--green-hover);color:#fff}
.btn--light{background:#fff;color:var(--ink);padding:16px 40px}
.btn--light:hover{background:var(--mint);color:var(--ink)}

/* ---------- Logo ----------
   Le nom utilise currentColor : blanc sur la photographie du bandeau,
   encre dans le pied de page et le panneau mobile. */
.logo{display:block;width:184px;max-width:100%;flex:none;line-height:0;color:var(--ink)}
.logo-svg{display:block;width:100%;height:auto}
.logo--lg{width:260px;max-width:100%;margin-left:-14px}
.footer-brand .logo--lg{margin-top:-20px;color:#fff}

/* ---------- En-tête ---------- */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:100px;padding:8px 0}

/* En-tête posé à même la photographie du bandeau : pas de barre blanche,
   le menu se fond dans l'image. Un voile sombre en haut du bandeau (voir
   .hero::before) garantit la lisibilité du texte blanc. */
.header--overlay{position:absolute;left:0;right:0;top:0;z-index:20}
.header--overlay .logo{color:#fff}
.header--overlay .nav-list a{color:rgba(255,255,255,.92)}
.header--overlay .btn-contact{background:none;border:1.5px solid rgba(255,255,255,.72);color:#fff}
.header--overlay .btn-contact:hover{background:#fff;border-color:#fff;color:var(--ink);filter:none}
.header--overlay .nav-list a:hover{color:#fff}
.header--overlay .nav-list a[aria-current="page"]{color:#fff;font-weight:600}
.header--overlay .burger span{background:#fff}

.nav-list{display:flex;gap:40px;font-weight:500;font-size:16px;line-height:100%}
.nav-list a{color:var(--ink)}
.nav-list a{position:relative;padding-bottom:9px}
.nav-list a:hover,.nav-list a[aria-current="page"]{color:var(--green)}
.nav-list a::after{content:"";position:absolute;left:50%;bottom:0;width:66%;height:1px;background:linear-gradient(90deg,transparent 0,currentColor 24%,currentColor 76%,transparent 100%);opacity:0;transform:translateX(-50%) scaleX(.25);transition:transform .22s ease,opacity .22s ease}
.nav-list a:hover::after,.nav-list a:focus-visible::after,.nav-list a[aria-current="page"]::after{opacity:.9;transform:translateX(-50%) scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .nav-list a::after{transition:none}
}
.header--overlay .nav-list a[aria-current="page"]{color:#fff}
.btn-contact{background:var(--grad-btn);padding:12px 20px;font-weight:600;font-size:16px;line-height:100%;color:#fff;white-space:nowrap}
.btn-contact:hover{color:#fff;filter:brightness(1.06)}

.burger{display:none;width:26px;height:18px;flex-direction:column;justify-content:space-between;background:none;border:0;padding:0;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink)}

.mobile-panel{position:fixed;inset:0;z-index:60;background:#fff;display:none;flex-direction:column}
.mobile-panel[data-open="true"]{display:flex}
.mobile-panel__top{display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 24px;flex:none}
.mobile-panel__close{width:24px;height:24px;background:none;border:0;padding:0;cursor:pointer;position:relative}
.mobile-panel__close::before,.mobile-panel__close::after{content:"";position:absolute;left:1px;top:11px;width:22px;height:2px;background:var(--ink)}
.mobile-panel__close::before{transform:rotate(45deg)}
.mobile-panel__close::after{transform:rotate(-45deg)}
.mobile-panel__body{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:24px 24px 40px;overflow-y:auto}
.mobile-nav a{display:block;padding:20px 0;border-bottom:1px solid rgba(38,46,39,.08);font-weight:500;font-size:20px;line-height:100%;color:var(--ink)}
.mobile-nav a[aria-current="page"]{font-weight:600;color:var(--green)}
.mobile-panel__foot{display:flex;flex-direction:column;gap:28px;padding-top:28px}
.mobile-panel__foot .btn-contact{text-align:center;padding:18px 20px}
body[data-nav-open="true"]{overflow:hidden}

/* ---------- Bandeaux ---------- */
/* Visuels : declares ici et non en attribut style=, afin que la politique
   de securite du contenu puisse interdire tout style en ligne.
   Chaque visuel est servi en WebP quand le navigateur le sait lire, sinon
   en JPEG : image-set() choisit tout seul, sans script. Une seconde
   declaration plus bas sert une version reduite aux petits ecrans. */
.hero.hero--accueil{background-image:url(../assets/hero-accueil.jpg);background-image:image-set(url(../assets/hero-accueil.webp) type("image/webp"),url(../assets/hero-accueil.jpg) type("image/jpeg"));background-position:right 42%}
.page-hero.page-hero--pourquoi{background-image:url(../assets/hero-pourquoi-nous.jpg);background-image:image-set(url(../assets/hero-pourquoi-nous.webp) type("image/webp"),url(../assets/hero-pourquoi-nous.jpg) type("image/jpeg"));background-position:center 62%}
.page-hero.page-hero--services{background-image:url(../assets/hero-services.jpg);background-image:image-set(url(../assets/hero-services.webp) type("image/webp"),url(../assets/hero-services.jpg) type("image/jpeg"));background-position:62% 32%}
.page-hero.page-hero--tarifs{background-image:url(../assets/hero-tarifs.jpg);background-image:image-set(url(../assets/hero-tarifs.webp) type("image/webp"),url(../assets/hero-tarifs.jpg) type("image/jpeg"));background-position:center 45%}
.page-hero.page-hero--contact{background-image:url(../assets/hero-contact.jpg);background-image:image-set(url(../assets/hero-contact.webp) type("image/webp"),url(../assets/hero-contact.jpg) type("image/jpeg"));background-position:center 62%}
.page-hero.page-hero--legal{background-image:url(../assets/hero-legal.jpg);background-image:image-set(url(../assets/hero-legal.webp) type("image/webp"),url(../assets/hero-legal.jpg) type("image/jpeg"))}
.page-hero.page-hero--decodeur{background-image:url(../assets/hero-decodeur.jpg);background-image:image-set(url(../assets/hero-decodeur.webp) type("image/webp"),url(../assets/hero-decodeur.jpg) type("image/jpeg"));background-position:center 38%}
.photo.photo--best{background-image:url(../assets/proche.jpg);background-image:image-set(url(../assets/proche.webp) type("image/webp"),url(../assets/proche.jpg) type("image/jpeg"))}
.photo.photo--visite{background-image:url(../assets/visite-domicile.jpg);background-image:image-set(url(../assets/visite-domicile.webp) type("image/webp"),url(../assets/visite-domicile.jpg) type("image/jpeg"));background-position:center 30%}
.photo.photo--explication{background-image:url(../assets/mission.jpg);background-image:image-set(url(../assets/mission.webp) type("image/webp"),url(../assets/mission.jpg) type("image/jpeg"))}
.photo--explication{aspect-ratio:16/9}
.photo--visite{min-height:660px}
.photo.photo--camille{background-image:url(../assets/dec-camille-600.jpg);background-image:image-set(url(../assets/dec-camille-600.webp) type("image/webp"),url(../assets/dec-camille-600.jpg) type("image/jpeg"))}
.photo.photo--yanis{background-image:url(../assets/dec-yanis-600.jpg);background-image:image-set(url(../assets/dec-yanis-600.webp) type("image/webp"),url(../assets/dec-yanis-600.jpg) type("image/jpeg"))}
.photo.photo--manon{background-image:url(../assets/dec-manon-600.jpg);background-image:image-set(url(../assets/dec-manon-600.webp) type("image/webp"),url(../assets/dec-manon-600.jpg) type("image/jpeg"))}
.photo.photo--nathan{background-image:url(../assets/dec-nathan-600.jpg);background-image:image-set(url(../assets/dec-nathan-600.webp) type("image/webp"),url(../assets/dec-nathan-600.jpg) type("image/jpeg"))}

/* Petits ecrans : un telephone n'a pas besoin d'un visuel de 1600 px. */
@media (max-width:700px){
  .hero.hero--accueil{background-image:url(../assets/hero-accueil-800.jpg);background-image:image-set(url(../assets/hero-accueil-800.webp) type("image/webp"),url(../assets/hero-accueil-800.jpg) type("image/jpeg"));background-position:72% 38%}
  .page-hero.page-hero--pourquoi{background-image:url(../assets/hero-pourquoi-nous-800.jpg);background-image:image-set(url(../assets/hero-pourquoi-nous-800.webp) type("image/webp"),url(../assets/hero-pourquoi-nous-800.jpg) type("image/jpeg"))}
  .page-hero.page-hero--services{background-image:url(../assets/hero-services-800.jpg);background-image:image-set(url(../assets/hero-services-800.webp) type("image/webp"),url(../assets/hero-services-800.jpg) type("image/jpeg"))}
  .page-hero.page-hero--tarifs{background-image:url(../assets/hero-tarifs-800.jpg);background-image:image-set(url(../assets/hero-tarifs-800.webp) type("image/webp"),url(../assets/hero-tarifs-800.jpg) type("image/jpeg"))}
  .page-hero.page-hero--contact{background-image:url(../assets/hero-contact-800.jpg);background-image:image-set(url(../assets/hero-contact-800.webp) type("image/webp"),url(../assets/hero-contact-800.jpg) type("image/jpeg"))}
  .page-hero.page-hero--legal{background-image:url(../assets/hero-legal-800.jpg);background-image:image-set(url(../assets/hero-legal-800.webp) type("image/webp"),url(../assets/hero-legal-800.jpg) type("image/jpeg"))}
  .page-hero.page-hero--decodeur{background-image:url(../assets/hero-decodeur-800.jpg);background-image:image-set(url(../assets/hero-decodeur-800.webp) type("image/webp"),url(../assets/hero-decodeur-800.jpg) type("image/jpeg"))}
  .photo.photo--visite{background-image:url(../assets/visite-domicile-800.jpg);background-image:image-set(url(../assets/visite-domicile-800.webp) type("image/webp"),url(../assets/visite-domicile-800.jpg) type("image/jpeg"))}
  .photo.photo--explication{background-image:url(../assets/mission-800.jpg);background-image:image-set(url(../assets/mission-800.webp) type("image/webp"),url(../assets/mission-800.jpg) type("image/jpeg"))}
  .photo.photo--camille{background-image:url(../assets/dec-camille.jpg);background-image:image-set(url(../assets/dec-camille.webp) type("image/webp"),url(../assets/dec-camille.jpg) type("image/jpeg"))}
  .photo.photo--yanis{background-image:url(../assets/dec-yanis.jpg);background-image:image-set(url(../assets/dec-yanis.webp) type("image/webp"),url(../assets/dec-yanis.jpg) type("image/jpeg"))}
  .photo.photo--manon{background-image:url(../assets/dec-manon.jpg);background-image:image-set(url(../assets/dec-manon.webp) type("image/webp"),url(../assets/dec-manon.jpg) type("image/jpeg"))}
  .photo.photo--nathan{background-image:url(../assets/dec-nathan.jpg);background-image:image-set(url(../assets/dec-nathan.webp) type("image/webp"),url(../assets/dec-nathan.jpg) type("image/jpeg"))}
  .photo.photo--best{background-image:url(../assets/proche-700.jpg);background-image:image-set(url(../assets/proche-700.webp) type("image/webp"),url(../assets/proche-700.jpg) type("image/jpeg"))}
}

/* Utilitaires remplacant les trois derniers style= en ligne */
.mb-60{margin-bottom:60px}
.ta-left{text-align:left}

.hero{position:relative;min-height:700px;padding-top:100px;display:flex;align-items:flex-end;background-position:center;background-size:cover;background-repeat:no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55) 0,rgba(0,0,0,.28) 90px,rgba(0,0,0,0) 190px),linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.64) 40%,rgba(0,0,0,.6) 62%,rgba(0,0,0,.18) 100%)}
.hero .container{position:relative;width:100%;padding-bottom:215px}
.hero__inner{max-width:667px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero__text{font-weight:400;font-size:18px;line-height:26px;color:#fff}

/* Rassurance du bandeau : les visages de quatre clients, la note Google et
   une ligne de confiance. La note est rafraichie par avis.php ; sans
   configuration, la valeur ecrite dans index.html reste affichee. */
.preuve{position:absolute;left:0;right:0;bottom:32px;max-width:1440px;margin:0 auto;padding:0 var(--gutter);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.preuve__visages{display:flex;align-items:center}
.preuve__visages picture{display:contents}
.preuve__visage{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.28)}
.preuve__visages picture+picture .preuve__visage{margin-left:-14px}
.preuve__note{font-weight:500;font-size:1rem;line-height:1.35;color:#fff;text-decoration:none}
.preuve__note:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.preuve__note strong{font-weight:700}
.preuve__detail{margin:0;font-weight:400;font-size:0.8125rem;line-height:1.4;color:#fff}
@media (min-width:640.05px){
  .preuve__detail{white-space:nowrap}
}

.page-hero{position:relative;min-height:400px;display:flex;align-items:flex-end;background-position:center;background-size:cover;background-repeat:no-repeat}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.4) 70%,rgba(0,0,0,.5) 100%)}
.page-hero .container{position:relative;width:100%;padding-top:100px;padding-bottom:100px}

/* ---------- Fil d'Ariane ---------- */
.ariane{padding:26px 0 0}
.ariane__liste{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
.ariane__item{display:flex;align-items:center;gap:10px;font-weight:500;font-size:15px;line-height:1.4;color:var(--grey-2)}
.ariane__item+.ariane__item::before{content:"›";color:#9AA09B;font-weight:400}
.ariane__item a{color:var(--green)}
.ariane__item a:hover{color:var(--green-hover);text-decoration:underline}
.ariane__item[aria-current]{color:var(--ink)}

/* ---------- Rythme ---------- */
.main .section{padding-top:var(--rhythm)}
.main{padding-bottom:var(--rhythm)}

/* ---------- Blocs 2 colonnes ---------- */
.split{display:flex;gap:clamp(48px,9vw,129px);align-items:center}
.split--wide{gap:clamp(48px,6.4vw,92px)}
/* Garde du depassement du cadre. Hors des paliers le cadre est fixe a 608 px
   dans un .split de 1240 px : un pourcentage s'y resoudrait sur la largeur du
   split, soit le double du necessaire. Dans les paliers le cadre remplit le
   split, le pourcentage y devient donc exact (voir les media queries). */
.split:has(.cadre){padding-bottom:56px}
.split__text{flex:0 1 503px;min-width:0;display:flex;flex-direction:column;gap:60px;align-items:flex-start}
.split__text--simple{flex:0 1 540px;min-width:0;gap:40px}
.stack-40{display:flex;flex-direction:column;gap:40px}
.stack-24{display:flex;flex-direction:column;gap:24px}
.stack-16{display:flex;flex-direction:column;gap:16px}

.about-visual-wrap{flex:0 1 608px;min-width:0}
.about-visual{position:relative;width:100%;max-width:608px;aspect-ratio:608/656}
.about-visual__frame{position:absolute;left:17.27%;top:4.573%;width:82.73%;height:95.427%;border:2px solid var(--green)}
.about-visual picture{display:contents}
.about-visual img{position:absolute;left:0;top:0;width:90.789%;height:91.463%;object-fit:cover;object-position:center}

.checklist{display:flex;flex-direction:column;gap:12px}
.checklist li{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:16px;line-height:26px;color:var(--grey)}
.checklist img{width:20px;height:20px;margin:3px 2px 0;flex:none}

.photo{background-position:center;background-size:cover;background-repeat:no-repeat}
/* Filet vert decale — la seule idee graphique du systeme, reprise ici sur les
   photos isolees accompagnees de texte. Trace en outline pour ne rien peser
   sur la mise en page ; le decalage sort du cote oppose au texte. Variante
   plus serree que l'original du bloc « Reparer, puis expliquer » : 24 px. */
/* Cadre vert decale — le trait est un element DOM place AVANT la photo, donc
   peint avant elle : ses bords interieurs sont reellement recouverts par
   l'image, et seuls ceux qui depassent se voient. Le motif est celui du bloc
   « Reparer, puis expliquer » ; seuls l'ampleur et le cote varient. */
.cadre{position:relative;flex:0 1 608px;min-width:0;container-type:inline-size;--c-l:4cqw;--c-t:4cqw;--c-r:-6cqw;--c-b:-6cqw}
.cadre__trait{position:absolute;left:var(--c-l);top:var(--c-t);right:var(--c-r);bottom:var(--c-b);border:2px solid var(--green);pointer-events:none}
.cadre .photo{position:relative;width:100%}
.cadre--large{--c-l:5.3cqw;--c-t:5.3cqw;--c-r:-8.5cqw;--c-b:-8.5cqw}
.cadre--droite{--c-l:3.3cqw;--c-t:3.3cqw;--c-r:-5cqw;--c-b:-5cqw}
/* Depassement vers le bas-gauche : ce sont les bords gauche et bas qui se voient */
.cadre--gauche{--c-l:-7.2cqw;--c-t:4.6cqw;--c-r:4.6cqw;--c-b:-7.2cqw}
.cadre--gauche-large{--c-l:-8.5cqw;--c-t:5.3cqw;--c-r:5.3cqw;--c-b:-8.5cqw}
.photo--best{min-height:600px}

/* Trois chiffres cles a la place d'une liste a puces : le vert de marque
   porte la valeur, le libelle reste en gris de corps. */
.chiffres{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
.chiffres__item{display:flex;flex-direction:column;gap:6px}
.chiffres__valeur{margin:0;font-weight:700;font-size:2.5rem;line-height:1.1;letter-spacing:-.02em;color:var(--green)}
.chiffres__libelle{margin:0;font-weight:400;font-size:0.9375rem;line-height:1.45;color:var(--grey-2);text-align:left;hyphens:none}

/* ---------- Cartes services ---------- */
.section-head{display:flex;flex-direction:column;gap:60px;align-items:center}
.section--cards{padding-bottom:60px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 24px;width:100%}
.card{border-radius:6px;padding:36px 40px;display:flex;flex-direction:column;gap:24px;background:#fff}
.card--lift{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s cubic-bezier(.2,.7,.3,1)}
.card--lift .card__icon{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.card--lift.is-lifted,.card--lift:active{transform:translateY(-10px);box-shadow:12px 30px 50px 0 rgba(105,127,175,.15),-6px -12px 40px 0 rgba(105,127,175,.05)}
.card--lift.is-lifted .card__icon,.card--lift:active .card__icon{transform:scale(1.06)}
@media (hover:hover) and (pointer:fine){
  .card--lift:hover{transform:translateY(-10px);box-shadow:12px 30px 50px 0 rgba(105,127,175,.15),-6px -12px 40px 0 rgba(105,127,175,.05)}
  .card--lift:hover .card__icon{transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .card--lift,.card--lift .card__icon{transition:none}
}
.card--mint{background:var(--mint);padding:28px 24px}
/* Cas de figure : les titres sont des citations de longueur inegale, on
   reserve deux lignes pour que les paragraphes s'alignent. */
.cards-3 .card--lift .h-card{min-height:2.6em;line-height:1.3}
.card__icon{position:relative;width:48px;height:48px;border-radius:8px;background:var(--grad-tile);flex:none}
.card__icon img{position:absolute;left:12px;top:12px;width:24px;height:24px}
.card__body{display:flex;flex-direction:column;gap:16px}
.card__text{font-weight:400;font-size:1.125rem;line-height:1.45;color:var(--grey)}

/* ---------- Avis ---------- */
.reviews{background:var(--mint);padding-bottom:var(--rhythm)}
.reviews__inner{display:flex;flex-direction:column;gap:60px;align-items:center}
.review{position:relative;width:100%;max-width:1078px;padding:0 44px}
.review p{font-style:italic;font-weight:400;font-size:20px;line-height:1.35;color:var(--grey);text-align:center}
.review__q-open{position:absolute;left:0;top:4px;width:28px;height:20px}
.review__q-close{position:absolute;right:0;bottom:4px;width:28px;height:20px}
.review-author{display:flex;justify-content:center}
.review-author__ligne{margin:0;display:flex;align-items:center;gap:12px;justify-content:center}
.review-author__initiale{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none;background:var(--green);font-weight:700;font-size:1.0625rem;line-height:1;letter-spacing:.02em;color:#fff}
.review-author__org{font-weight:400;font-size:0.9375rem;line-height:1.4;color:var(--grey-2)}
.reviews__viewport{width:100%;overflow:hidden}
.reviews__track{display:flex;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;touch-action:pan-x pan-y}
.reviews__track::-webkit-scrollbar{display:none}
.review-slide{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;gap:60px;align-items:center;justify-content:flex-start}

.dots{display:flex;justify-content:center;align-items:center}
.dot{display:block;padding:14px 4px;background:none;border:0;cursor:pointer;line-height:0}
.dot__track{display:block;position:relative;width:8px;height:8px;border-radius:60px;background:rgba(0,0,0,.3);overflow:hidden;transition:width .35s cubic-bezier(.2,.7,.3,1),background .35s ease}
.dot:hover .dot__track{background:rgba(0,0,0,.5)}
.dot:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
.dot[aria-current="true"] .dot__track{width:32px;background:rgba(0,0,0,.18)}
.dot__fill{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left center}
.dot[aria-current="true"] .dot__fill{transform:scaleX(1)}
.dot[aria-current="true"] .dot__fill.is-timing{animation:dot-fill 7000ms linear forwards}
@keyframes dot-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .dot__track{transition:none}
  .dot[aria-current="true"] .dot__fill.is-timing{animation:none}
}

/* ---------- Bandeau d'appel ---------- */
.band{position:relative;overflow:hidden;background:var(--grad-band);min-height:360px;padding:74px 105px;display:flex;flex-direction:column;gap:32px;align-items:flex-start;justify-content:center}
.band h2{font-weight:700;font-size:48px;line-height:58px;color:#fff}
.band p{max-width:702px;font-family:"General Sans",Raleway,sans-serif;font-weight:400;font-size:18px;line-height:28px;color:#fff}
.band__doodle{position:absolute;right:15px;bottom:-26px;width:171.1px;height:131.6px;pointer-events:none}

/* ---------- Frise chronologique ---------- */
.timeline{display:flex;flex-direction:column;gap:52px}
.timeline__item{display:flex}
.timeline__year{width:90px;flex:none;font-family:"General Sans",Raleway,sans-serif;font-weight:500;font-size:32px;line-height:28px;color:var(--ink)}
.timeline__dot{width:36px;flex:none;padding-top:8px}
.timeline__dot i{display:block;width:12px;height:12px;border-radius:50%;background:var(--grad-tile)}
.timeline__body{flex:1;display:flex;flex-direction:column;gap:16px}
.timeline__title{font-family:"General Sans",Raleway,sans-serif;font-weight:500;font-size:32px;line-height:28px;color:var(--ink)}
.timeline__text{border-left:1px solid var(--ink);padding-left:17px;font-family:"General Sans",Raleway,sans-serif;font-weight:400;font-size:18px;line-height:28px;color:var(--grey-2)}
.timeline__year-inline{display:none}

/* ---------- Équipe ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px;width:100%}
.team-card__photo{min-height:240px;background-position:center 18%}
.team-card__body{padding:23px 16px 0;display:flex;flex-direction:column;gap:16px}
.team-card__name{font-weight:600;font-size:24px;line-height:30px}
.team-card__role{font-weight:400;font-size:15px;line-height:24px;color:var(--grey-2);white-space:nowrap}

/* ---------- Page Services : prestations ---------- */

/* ---------- Rejoignez-nous ---------- */

/* ---------- Formulaire et bloc contact : 65 / 35 ---------- */
.form-cols{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:56px;align-items:start}

/* ---------- Bloc « Nous contacter » ---------- */
.info{display:flex;flex-direction:column;gap:20px;position:sticky;top:24px}
.info__titre{margin:0;padding-bottom:14px;border-bottom:2px solid var(--green);font-weight:700;font-size:1.5rem;line-height:1.3;color:var(--ink)}
.info__liste{margin:0;display:flex;flex-direction:column}
.info__ligne{padding:18px 0;border-bottom:1px solid rgba(38,46,39,.12)}
.info__ligne:last-child{border-bottom:0;padding-bottom:0}
.info__label{margin:0 0 6px;font-weight:600;font-size:0.8125rem;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2)}
.info__valeur{margin:0;font-weight:500;font-size:1.0625rem;line-height:1.5;color:var(--ink)}
.info__valeur a{font-weight:600}

/* La phrase qui resume la promesse : traitee comme une citation, filet vert
   a gauche, sans guillemets ni italique — le systeme n'en a qu'un seul. */
.manifeste{margin:0;padding:4px 0 4px 24px;border-left:2px solid var(--green)}
.manifeste p{margin:0;font-weight:600;font-size:1.25rem;line-height:1.5;color:var(--ink);text-align:left;hyphens:none}

/* ---------- Emplacements de photographie a fournir ----------
   Un cadre nomme, a la place d'une image manquante : la mise en page est
   deja juste, il ne reste qu'a deposer le fichier. */

/* Liste de criteres, un cran plus aeree que la liste du bandeau */
.checklist--large{gap:18px}
.checklist--large li{font-size:1.0625rem;line-height:1.6;color:var(--ink)}

/* Champ de depot de fichier */
.field__input--fichier{padding:13px 16px;background:#fff;cursor:pointer;font-size:1rem}
.field__input--fichier::file-selector-button{margin-right:14px;padding:8px 14px;background:var(--ink);border:0;color:#fff;font-family:inherit;font-weight:600;font-size:0.875rem;cursor:pointer}
.field__input--fichier:hover::file-selector-button{background:var(--green)}

/* ---------- Emplacements de media a fournir ----------
   Un cadre nomme a la place d'un fichier manquant : la mise en page est deja
   juste, il ne reste qu'a deposer la video ou la photographie. */
/* Lecteur video : aucune commande native. Un seul bouton, lecture ou pause,
   pour que la video soit vue dans l'ordre. Le poster couvre le cadre le temps
   du chargement, et la video ne se telecharge qu'au premier clic. */
.video{margin:0;display:flex;flex-direction:column;gap:14px}
.video__cadre{position:relative;width:100%;background:var(--ink)}
.video__lecteur{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ink)}
.video__bouton{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;transition:background .28s ease}
.video__bouton:hover{background:rgba(38,46,39,.14)}
.video__bouton:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.video__cadre[data-lecture="oui"] .video__bouton{background:none}
.video__cadre[data-lecture="oui"] .video__bouton:hover{background:rgba(38,46,39,.18)}
.video__icone{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:0 6px 22px rgba(0,0,0,.32)}
.video__icone--lecture::before{content:"";width:0;height:0;margin-left:5px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--green)}
.video__icone--pause{display:none;gap:7px}
.video__icone--pause span{width:6px;height:22px;background:var(--green)}
.video__cadre[data-lecture="oui"] .video__icone--lecture{display:none}
.video__cadre[data-lecture="oui"] .video__icone--pause{display:flex;align-items:center;justify-content:center}
.video__cadre[data-lecture="oui"] .video__bouton .video__icone{opacity:0;transition:opacity .28s ease}
/* La reapparition au survol ne vaut que pour une souris : sur ecran tactile,
   :hover reste colle apres le toucher et le bouton ne s'effacerait jamais. */
@media (hover:hover) and (pointer:fine){
  .video__cadre[data-lecture="oui"]:hover .video__bouton .video__icone{opacity:1}
}
.video__legende-int{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:72px 32px 26px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(to top,rgba(0,0,0,.68) 0%,rgba(0,0,0,.34) 60%,rgba(0,0,0,0) 100%);pointer-events:none;transition:opacity .28s ease}
.video__cadre[data-lecture="oui"] .video__legende-int{opacity:0}
.video__titre{margin:0;font-weight:700;font-size:1.75rem;line-height:1.25;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.video__sous-titre{margin:0;max-width:52ch;font-weight:400;font-size:1rem;line-height:1.5;color:rgba(255,255,255,.88);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.video__sous-titre--dessous{display:none}
.video__repli{margin:0;padding:24px;font-weight:400;font-size:1rem;line-height:1.6;color:#fff}
@media (prefers-reduced-motion:reduce){
  .video__bouton,.video__cadre[data-lecture="oui"] .video__bouton .video__icone{transition:none}
}
.video-intro{margin-bottom:40px;display:flex;flex-direction:column;gap:16px;max-width:760px}

/* ---------- Zone d'intervention (carte pleine largeur) ---------- */
.zone{display:flex;flex-direction:column;gap:32px}
.zone__intro{max-width:760px;display:flex;flex-direction:column;gap:16px}
.zone__carte{margin:0;width:100%}
.zone__carte picture{display:contents}
.zone__carte img{width:100%;height:auto}
.zone__legende{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.chip{margin:0;display:flex;align-items:flex-start;gap:10px;padding:0}
.chip__pastille{width:10px;height:10px;margin-top:5px;flex:none}
.chip__pastille--incluse{background:#68B13F}
.chip__pastille--hors{background:#AFB8AF}
.chip__texte{display:flex;flex-direction:column;gap:2px}
.chip__titre{font-weight:600;font-size:0.9375rem;line-height:1.35;color:var(--ink)}
.chip__detail{font-weight:400;font-size:0.8125rem;line-height:1.5;color:var(--grey-2)}

/* ---------- Formulaire de contact ---------- */
.form-block{display:flex;flex-direction:column;gap:60px}
.form-block__intro{display:flex;flex-direction:column;gap:16px}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__notice{margin:0;padding:18px 22px;border-radius:4px;font-weight:500;font-size:16px;line-height:1.5}
/* Le message de retour s'affiche sans JavaScript : le fragment de l'adresse
   (#envoi-ok) cible l'element, et cette regle l'emporte sur son attribut
   hidden. Si le script ne s'execute pas, le visiteur voit quand meme la
   confirmation au lieu d'une page identique a celle qu'il vient de quitter. */
.form__notice:target{display:block}
.form__notice--ok{background:#C9FAD6;color:#12551A}
.form__notice--ko{background:#FDE7E7;color:#7A1B1B}
.form__notice a{font-weight:600;white-space:nowrap}
.form{background:var(--mint);border-radius:6px;padding:44px 44px;display:flex;flex-direction:column;gap:32px}
.form__grid{display:grid;grid-template-columns:1fr;gap:24px}
.field{margin:0;display:flex;flex-direction:column;gap:10px}
.field--full{grid-column:1 / -1}
.field__label{font-weight:600;font-size:16px;line-height:1.35;color:var(--ink)}
.field__label abbr{color:var(--green);text-decoration:none;border:0}
.field__input{width:100%;box-sizing:border-box;padding:16px 18px;background:#fff;border:1px solid rgba(38,46,39,.14);border-radius:4px;font-family:inherit;font-weight:400;font-size:17px;line-height:1.4;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.field__input::placeholder{color:#767C77}
.field__input:hover{border-color:rgba(38,46,39,.3)}
.field__input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(2,138,15,.12)}
.field__input--select{appearance:none;-webkit-appearance:none;padding-right:48px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23028A0F' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.field__input--area{resize:vertical;min-height:150px}
.field__aide{font-weight:400;font-size:0.875rem;line-height:1.5;color:var(--grey-2)}
.choix{margin:0;padding:0;border:0}
.choix__options{margin-top:10px;display:flex;flex-wrap:wrap;gap:12px 24px}
.choix__option{display:inline-flex;align-items:center;min-height:44px;gap:9px}
.choix__radio{width:22px;height:22px;margin:0;flex:none;accent-color:var(--green);cursor:pointer}
.choix__label{display:flex;align-items:center;min-height:44px;font-weight:400;font-size:1.0625rem;line-height:1.4;color:var(--ink);cursor:pointer}
.form__rgpd{margin:0;padding:16px 20px;background:var(--mint);border-radius:4px;font-weight:400;font-size:15px;line-height:1.6;color:var(--ink)}
.form__rgpd a{font-weight:600}
.form__actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.form__actions .btn{border:0;font-family:inherit}
@media (prefers-reduced-motion:reduce){
  .field__input{transition:none}
}

/* ---------- Questions fréquentes (accordéon) ---------- */
.faq{display:flex;flex-direction:column;gap:16px}
.faq__item{background:var(--mint);border-radius:6px;overflow:hidden}
.faq__question{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 32px;cursor:pointer;list-style:none;font-weight:600;font-size:20px;line-height:1.35;color:#1E1D24;transition:color .2s ease}
.faq__question::-webkit-details-marker{display:none}
.faq__question:hover{color:var(--green)}
.faq__question:focus-visible{outline:2px solid var(--green);outline-offset:-4px}
.faq__sign{position:relative;width:20px;height:20px;flex:none}
.faq__sign::before,.faq__sign::after{content:"";position:absolute;left:50%;top:50%;background:var(--green);border-radius:2px;transform:translate(-50%,-50%);transition:transform .25s cubic-bezier(.2,.7,.3,1),opacity .25s ease}
.faq__sign::before{width:20px;height:2px}
.faq__sign::after{width:2px;height:20px}
.faq__item[open] .faq__sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq__answer{padding:0 32px 28px;overflow:hidden}
.faq__answer p{margin:0;font-weight:400;font-size:1.125rem;line-height:1.45;color:var(--grey);}
@media (prefers-reduced-motion:reduce){
  .faq__question,.faq__sign::before,.faq__sign::after{transition:none}
}

/* ---------- Page Cost & Payment ---------- */
.switch{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#fff;border:2px solid var(--ink);border-radius:8px;padding:0;gap:0;overflow:hidden}
.switch__opt{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 24px;border:0;border-radius:0;background:none;font-family:inherit;font-weight:500;font-size:17px;line-height:1.2;color:var(--ink);white-space:nowrap;cursor:pointer;transition:background .18s ease,color .18s ease}
.switch__opt:hover{background:rgba(38,46,39,.06)}
.switch__opt.is-active{background:var(--ink);color:#fff}
.switch__opt.is-active:hover{background:var(--ink)}
.switch__save{border-radius:4px;background:#F9D783;padding:3px 10px;font-weight:600;font-size:14px;line-height:1.2;color:#000B33}

.plans-hint{display:none}
.section-head+.plans{margin-top:52px}
.plans{padding-top:6px}
.plans{display:flex;gap:25px;align-items:stretch;justify-content:center;width:100%}
.plan{flex:0 1 397px;min-width:0;border-radius:9.2317px;background:#fff;border:2.77px solid #1AA703;padding:52px 47.88px 40px;display:flex;flex-direction:column}
.plan--featured{background:linear-gradient(165deg,#028A0F 0%,#01690B 100%);border-color:var(--green)}
.plan--featured .plan__price small{opacity:1}
.plan__badge{align-self:flex-start;border-radius:5.539px;background:#F1F1F1;padding:5.539px 13.848px;font-weight:600;font-size:14.77px;line-height:27.695px;letter-spacing:.01em;color:#000B33}
.plan__badge--white{background:#fff}
.plan{position:relative}
.plan__popular{position:absolute;left:47.88px;top:12px;white-space:nowrap;margin:0;border-radius:5.539px;background:#FFCD00;padding:4px 12px;font-weight:600;font-size:12.5px;line-height:20px;letter-spacing:.01em;color:#000B33}
.plan__pour{margin:14px 0 0;min-height:4.2em;font-weight:400;font-size:0.9375rem;line-height:1.4;color:var(--grey-2);text-align:left}
.plan--featured .plan__pour{color:#fff}
.plan__rule{height:1px;background:#001C80;opacity:.1;margin-top:22px}
.plan--featured .plan__rule{background:#fff;opacity:.2}
.plan__price{margin-top:22.4px;display:flex;flex-direction:column}
.plan__price b{font-weight:600;font-size:56px;line-height:66px;letter-spacing:-.462px;white-space:nowrap;color:#000B33}
.plan__price small{margin-top:4.9px;min-height:2.7em;font-weight:600;font-size:14.77px;line-height:1.35;color:#000;opacity:.8}
.plan--featured .plan__price b{color:#fff}
.plan--featured .plan__price small{color:#fff}
.plan__rule--2{margin-top:27.7px}
.plan--featured .plan__rule--2{margin-top:27.7px}
.plan__features{margin-top:27.9px;margin-bottom:auto;display:flex;flex-direction:column;gap:13.85px}
.plan__features li{display:flex;align-items:center;gap:5.058px;min-height:24px;font-weight:400;font-size:0.923rem;line-height:1.62;color:#000}
.plan--featured .plan__features li{color:#fff}
.plan__features img{width:24.149px;height:22.156px;flex:none}
.plan__cta{margin-top:32.5px;border-radius:5.539px;background:var(--ink);padding:11px 0;text-align:center;font-weight:600;font-size:14.77px;line-height:24.002px;color:#fff}
.plan__cta:hover{color:#fff;filter:brightness(1.3)}
.plan--featured .plan__cta{background:#F9D783;color:#000B33}
.plan--featured .plan__cta:hover{color:#000B33;filter:brightness(1.06)}
.plan__note{margin-top:14px;margin-bottom:0;text-align:center;font-weight:400;font-size:13px;line-height:20px;white-space:nowrap;color:#000;opacity:.8}
.plan--featured .plan__note{color:#fff;opacity:.92}
.centered-copy{display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}

/* ---------- Pages d'informations légales ---------- */
.page-hero--legal{height:300px}
.legal{max-width:820px;display:flex;flex-direction:column;gap:0}
.legal__maj{margin:0 0 44px;font-weight:500;font-size:14px;line-height:1.5;color:var(--grey-2)}
.legal__h2{margin:0 0 18px;font-weight:700;font-size:26px;line-height:1.3;color:var(--ink)}
.legal__h2:not(:first-of-type){margin-top:52px;padding-top:44px;border-top:1px solid rgba(38,46,39,.1)}
.legal__p{margin:0 0 16px;font-family:"General Sans",Raleway,sans-serif;font-weight:400;font-size:1.0625rem;line-height:1.65;color:var(--grey-2)}
.legal__p:last-child{margin-bottom:0}

.legal__list{margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:12px}
.legal__list li{position:relative;padding-left:22px;font-family:"General Sans",Raleway,sans-serif;font-weight:400;font-size:1.0625rem;line-height:1.6;color:var(--grey-2)}
.legal__list li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--green)}
.legal__list strong{font-weight:500;color:var(--ink)}

/* ---------- Mention Services a la personne ---------- */
.sap-badge{display:flex;align-items:center;gap:16px;padding:14px 18px;background:#fff;border:1px solid rgba(38,46,39,.12);border-radius:6px;align-self:flex-start;max-width:340px}

/* Logo officiel Services a la personne, ratio 1,36 : la boite respecte
   cette proportion. */
.sap-badge__logo{display:block;width:60px;height:44px;background:center/contain no-repeat url(../assets/logo-sap.png);flex:none}
.sap-badge__texte{margin:0;font-weight:400;font-size:13px;line-height:1.5;color:var(--ink)}
.sap-badge__texte strong{font-weight:600;color:var(--green)}
.sap-badge--grand{max-width:760px;gap:24px;padding:24px 28px;background:var(--mint);border-color:rgba(2,138,15,.2);align-self:center;text-align:left}
.sap-badge--grand .sap-badge__logo{width:92px;height:68px}
.sap-badge--grand .sap-badge__texte{font-size:15px;line-height:1.6}

/* ---------- Informations tarifaires obligatoires ---------- */
.mentions-tarifs{background:var(--mint);border-radius:6px;padding:48px 52px;display:flex;flex-direction:column;gap:24px}
.mentions-tarifs__titre{margin:0;font-weight:700;font-size:28px;line-height:1.3;color:var(--ink)}
.mentions-tarifs__devis{margin:0;padding:18px 22px;background:#fff;border-left:3px solid var(--green);font-weight:400;font-size:15px;line-height:1.6;color:var(--ink)}
.mentions-tarifs__ref{margin:0;font-weight:400;font-size:14px;line-height:1.55;color:var(--grey-2)}

/* ---------- Formulaire type de retractation ---------- */
.retractation{margin-top:8px;padding:32px 36px;background:var(--mint);border-radius:6px;display:flex;flex-direction:column;gap:18px}
.retractation__ligne{margin:0;font-family:"General Sans",Raleway,sans-serif;font-weight:400;font-size:16px;line-height:1.6;color:var(--grey-2)}
.retractation__ligne em{font-style:italic}
.retractation__champ{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-family:"General Sans",Raleway,sans-serif;font-weight:500;font-size:16px;line-height:1.9;color:var(--ink)}
.retractation__champ em{font-weight:400;font-style:italic;color:var(--grey-2)}
/* Le libelle forme un seul item de flex : sans cela le <em> le scinde en
   trois, et les deux-points se retrouvent seuls sur une ligne en mobile. */
.retractation__label{flex:0 1 auto}
.retractation__trait{flex:1 1 220px;min-width:140px;height:1px;background:rgba(38,46,39,.28);transform:translateY(-3px)}
.retractation__trait--court{flex:0 1 150px}
.retractation__champ--signature{margin-top:6px}

/* ---------- Page introuvable ---------- */
.erreur{max-width:640px;display:flex;flex-direction:column;gap:20px;padding:40px 0 24px}
.erreur__code{margin:0;font-weight:600;font-size:14px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.erreur__liens{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--ink);padding:80px 0 32px}
/* Quand la derniere section porte le bandeau vert, le pied de page encre vient
   juste apres : sans cet ecart les deux blocs sombres se collent. Enferme dans
   une requete desktop, car sa specificite (0,5,0) l'emporterait sinon sur les
   paliers mobiles et sur la feuille d'impression, tous en (0,1,0). */
@media (min-width:1100.05px){
  .main:has(> .section:last-child .band) + .site-footer{padding-top:112px}
}
.footer-haut{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.footer-brand p{margin:0;max-width:420px;font-weight:400;font-size:1.0625rem;line-height:1.6;color:rgba(255,255,255,.82)}
.socials{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.socials img{height:20px;width:auto}
/* Les glyphes sont traces en encre : sur fond sombre on les inverse. */
.site-footer .socials img,.footer-contact__ico{filter:invert(1) brightness(1.9)}
.socials a{display:flex}
.socials img{transition:filter .28s ease}
/* Chaque icone reprend sa couleur au survol : #1877F2, #25D366, #3F6C8F */
.socials a[aria-label^="Facebook"]:hover img{filter:invert(38%) sepia(72%) saturate(3200%) hue-rotate(202deg) brightness(97%) contrast(96%)}
.socials a[aria-label^="WhatsApp"]:hover img{filter:invert(63%) sepia(59%) saturate(548%) hue-rotate(90deg) brightness(97%) contrast(92%)}
.socials a[aria-label^="Instagram"]:hover img{filter:invert(38%) sepia(62%) saturate(2380%) hue-rotate(316deg) brightness(96%) contrast(93%)}
.socials a[aria-label^="YouTube"]:hover img{filter:invert(15%) sepia(96%) saturate(6800%) hue-rotate(2deg) brightness(101%) contrast(118%)}
/* Pied de page sombre : les glyphes y sont inverses en blanc, donc les filtres
   ci-dessus — calcules pour un glyphe en encre — donneraient une couleur
   fausse. On les rejoue sans l'inversion, en teintes lisibles sur l'encre. */
.site-footer .socials a[aria-label^="Facebook"]:hover img{filter:invert(47%) sepia(83%) saturate(2075%) hue-rotate(197deg) brightness(101%) contrast(94%)}
.site-footer .socials a[aria-label^="WhatsApp"]:hover img{filter:invert(72%) sepia(45%) saturate(730%) hue-rotate(85deg) brightness(98%) contrast(90%)}
.site-footer .socials a[aria-label^="Instagram"]:hover img{filter:invert(56%) sepia(48%) saturate(2100%) hue-rotate(313deg) brightness(101%) contrast(92%)}
.site-footer .socials a[aria-label^="YouTube"]:hover img{filter:invert(38%) sepia(85%) saturate(4200%) hue-rotate(357deg) brightness(105%) contrast(112%)}
@media (prefers-reduced-motion:reduce){
  .socials img{transition:none}
}

.footer-col{display:flex;flex-direction:column;gap:20px}
.footer-col__titre{margin:0;font-weight:600;font-size:1.25rem;line-height:1.3;color:#fff}
.footer-col ul{display:flex;flex-direction:column;gap:14px}
.footer-col a{font-weight:400;font-size:1.0625rem;line-height:1.4;color:rgba(255,255,255,.86)}
.footer-col a:hover{color:#fff}

.footer-contact li{display:flex;align-items:flex-start;gap:12px;font-weight:400;font-size:1.0625rem;line-height:1.5;color:rgba(255,255,255,.86)}
.footer-contact__ico{width:20px;height:20px;margin-top:3px;flex:none}
.footer-contact a{font-weight:400}

/* Les deux filets encadrent la ligne « Suivez-nous » et les liens legaux */
.footer-barre{margin-top:56px;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.footer-barre__inner{padding-top:24px;padding-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-suivre{display:flex;align-items:center;gap:20px}
.footer-suivre__label{font-weight:600;font-size:0.9375rem;line-height:1.3;color:#fff}
.footer-legal{display:flex;align-items:center;gap:32px;flex-wrap:wrap;text-align:left}
.footer-legal a{font-weight:400;font-size:0.9375rem;line-height:1.4;color:rgba(255,255,255,.72)}
.footer-legal a:hover{color:#fff}

.copyright{margin-top:24px;text-align:center;font-weight:400;font-size:0.8125rem;line-height:1.7;color:rgba(255,255,255,.62)}

/* =========================================================
   TABLETTE — référence 768 px
   ========================================================= */
@media (max-width:1100px){
  :root{--gutter:40px;--rhythm:88px}
  /* Trois colonnes deviennent trop etroites pour des titres cites : deux. */
  .chiffres{gap:24px 20px}
  .chiffres__valeur{font-size:2.25rem}
  .cards-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .site-header{min-height:88px}
  .nav-list,.site-header .btn-contact{display:none}
  .burger{display:flex}

  .h-hero{font-size:46px;line-height:52px}
  .h-page{font-size:48px;line-height:56px}
  .h-section{font-size:40px;line-height:48px}

  .hero::before{background:linear-gradient(to bottom,rgba(0,0,0,.36) 0%,rgba(0,0,0,.22) 32%,rgba(0,0,0,.4) 100%),linear-gradient(90deg,rgba(0,0,0,.56) 0%,rgba(0,0,0,.46) 62%,rgba(0,0,0,.16) 100%)}
  .hero{min-height:520px;padding-top:88px;align-items:flex-start}
  .hero .container{padding-top:40px;padding-bottom:185px}
  .preuve{bottom:26px;gap:8px}
  .page-hero{min-height:320px}
  .page-hero .container{padding-top:88px;padding-bottom:56px}

  .split,.split--wide{flex-direction:column;align-items:stretch;gap:48px}
  .split__text,.split__text--simple{flex:1 1 auto;gap:40px}
  .about-visual-wrap{flex:none;align-self:center;width:100%;max-width:608px}
  /* Le decalage reste proportionnel ; on retrecit la photo pour que le
     depassement tombe dans la marge et non hors de l'ecran. */
  .cadre{flex:none;width:92%}
  .cadre--gauche,.cadre--gauche-large{margin-left:auto}
  .split:has(.cadre){padding-bottom:8%}
  .photo--best,.photo--visite,.photo--explication{flex:none;width:100%}
  .photo--best{min-height:480px}
  .photo--visite{min-height:520px}

  .cards-2,.team-grid{grid-template-columns:1fr;gap:24px}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:40px 24px}
  .card{padding:32px 36px}
  .section--cards{padding-bottom:60px}
  .team-card__photo{min-height:273px}

  .reviews__inner{gap:48px}
  .review-slide{gap:48px}
  .review{padding:0 44px}

  .band{min-height:0;padding:56px 40px}
  .band h2{font-size:40px;line-height:48px}
  .band__doodle{width:137px;height:105px;right:24px;bottom:20px}

  .timeline{gap:40px}
  .timeline__year{width:74px;font-size:26px}
  .timeline__dot{width:28px}
  .timeline__title{font-size:26px}
  .timeline__text{padding-left:16px}

  .form-cols{grid-template-columns:1fr;gap:32px}
  .info{position:static}
  .zone{gap:24px}
  .video-intro{margin-bottom:32px}
  .manifeste{padding-left:20px}
  .manifeste p{font-size:1.1875rem}
  .zone__legende{grid-template-columns:1fr;gap:14px}
  .info__titre{font-size:1.3125rem}
  .chip{padding:0}
  .form-block{gap:48px}
  .form{padding:40px 36px;gap:28px}
  .form__grid{grid-template-columns:1fr;gap:24px}
  .faq__question{padding:22px 24px;font-size:18px}
  .faq__answer{padding:0 24px 24px}

  .plans{flex-direction:column;gap:25px}
  .plan{flex:1 1 auto}

  .sap-badge--grand{padding:20px 22px;gap:20px}
  .retractation{padding:28px 26px}
  .mentions-tarifs{padding:36px 32px}
  .mentions-tarifs__titre{font-size:25px}
  .ariane{padding-top:22px}
  .page-hero--legal{height:260px}
  .legal__h2{font-size:23px}
  .footer-haut{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 48px}
  .footer-brand{grid-column:1 / -1}
  .footer-barre{margin-top:44px}
  .footer-barre__inner{padding-top:20px;padding-bottom:20px}
  .site-footer{padding:64px 0 32px}
}

/* =========================================================
   MOBILE — référence 390 px
   ========================================================= */
/* Deux colonnes de 160 px coupaient le courriel : une seule des 900 px. */
@media (max-width:900px){
  .footer-haut{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}
  .footer-brand{grid-column:1 / -1}
}

@media (max-width:640px){
  :root{--gutter:24px;--rhythm:64px}
  .site-header{min-height:72px}
  /* Trois colonnes de 101 px rendraient les libelles illisibles : une seule
     colonne, valeur et libelle cote a cote. */
  .chiffres{grid-template-columns:1fr;gap:18px}
  .chiffres__item{flex-direction:row;align-items:baseline;gap:12px}
  .chiffres__valeur{font-size:1.875rem;min-width:3.2em}
  .video-intro{margin-bottom:24px}
  .video__legende-int{padding:44px 18px 16px;gap:0}
  .video__titre{font-size:1.0625rem;line-height:1.3}
  /* Trop etroit pour deux niveaux incrustes : l'accroche descend sous la video. */
  .video__legende-int .video__sous-titre{display:none}
  .video__sous-titre--dessous{display:block;font-size:0.9375rem;color:var(--grey-2);text-shadow:none}
  .video__icone{width:60px;height:60px}
  .manifeste{padding-left:16px}
  .manifeste p{font-size:1.0625rem}

  .h-hero{font-size:36px;line-height:42px}
  .h-page{font-size:36px;line-height:42px}
  .h-section{font-size:32px;line-height:38px}
  .lead,.card__text{font-size:1rem;line-height:1.5}
  .body-gs{font-size:1rem;line-height:1.6}

  .hero{min-height:480px;padding-top:72px}
  .hero::before{background:linear-gradient(to bottom,rgba(0,0,0,.34) 0%,rgba(0,0,0,.2) 34%,rgba(0,0,0,.42) 100%),linear-gradient(90deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.12) 100%)}
  .hero .container{padding-top:32px;padding-bottom:175px}
  .preuve{bottom:20px;gap:8px}
  .preuve__visage{width:38px;height:38px}
  .preuve__visages picture+picture .preuve__visage{margin-left:-12px}
  .preuve__detail{font-size:0.75rem}
  .hero__text{font-size:16px;line-height:24px}
  .page-hero{min-height:240px}
  .page-hero::before{background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.64) 40%,rgba(0,0,0,.46) 100%)}
  .page-hero .container{padding-top:72px;padding-bottom:40px}

  .split,.split--wide{gap:32px}
  .split__text,.split__text--simple{gap:32px}
  .stack-40{gap:32px}
  .about-visual-wrap{align-self:stretch;max-width:none}
  .cadre{width:90%}
  .split:has(.cadre){padding-bottom:8%}
  .photo--best{min-height:320px}
  .photo--visite{min-height:400px}

  .cards-3{grid-template-columns:1fr;gap:20px}
  .cards-2{gap:20px}
  .team-grid{grid-template-columns:1fr;gap:32px}
  .card{padding:24px 20px;gap:20px}
  .section--cards{padding-bottom:60px}
  .card--mint{padding:24px 20px}
  .card__body{gap:12px}
  .h-card{font-size:18px;line-height:22px}
  .team-card__photo{min-height:281px}
  .team-card__body{padding:20px 0 0;gap:12px}
  .team-card__name{font-size:22px;line-height:28px}
  .team-card__role{font-size:15px;line-height:22px}

  .reviews__inner{gap:32px}
  .review-slide{gap:32px}
  .review{padding:28px 0 0}
  .review p{font-size:16px;line-height:1.5}
  .review__q-open{width:22px;height:16px;top:0}
  .review__q-close{width:22px;height:16px;bottom:-22px}

  .band{padding:40px 24px 132px;gap:28px}
  .band h2{font-size:32px;line-height:38px}
  .band__doodle{width:111px;height:85px;right:16px;bottom:16px}

  .timeline{gap:32px}
  .timeline__item{gap:16px}
  .timeline__year{display:none}
  .timeline__year-inline{display:block;font-family:"General Sans",Raleway,sans-serif;font-weight:500;font-size:24px;line-height:28px;color:var(--ink)}
  .timeline__dot{width:12px;padding-top:6px}
  .timeline__body{gap:12px}
  .timeline__title{font-size:24px}
  .timeline__text{padding-left:14px;font-size:16px;line-height:26px}

    
  .zone{gap:16px}
  .form-block{gap:32px}
  .form{padding:28px 22px;gap:24px}
  .field__input{padding:14px 16px;font-size:16px}
  .field__input--area{min-height:130px}
  .choix__options{flex-direction:column;gap:4px}
  .form__actions{gap:16px}
  .form__actions .btn{width:100%;text-align:center}
  .faq{gap:12px}
  .faq__question{padding:18px 20px;font-size:17px;gap:16px}
  .faq__sign{width:18px;height:18px}
  .faq__sign::before{width:18px}
  .faq__sign::after{height:18px}
  .faq__answer{padding:0 20px 20px}
  .faq__answer p{font-size:1rem;line-height:1.5}

  .switch{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;gap:0}
  .switch__opt{justify-content:center;padding:13px 10px;font-size:14px;gap:6px;text-align:center}
  .switch__save{padding:2px 7px;font-size:12px}
  /* Carrousel : une formule visible, la suivante amorcee a droite */
  .plans{
    flex-direction:row;
    gap:16px;
    margin:0 calc(var(--gutter) * -1);
    padding:6px var(--gutter) 8px;
    justify-content:flex-start;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);
    width:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .plans::-webkit-scrollbar{display:none}
  .plan{flex:0 0 78%;scroll-snap-align:start;scroll-snap-stop:always;padding:46px 20px 32px}
  .plans-hint{display:flex;gap:0;justify-content:center;margin-top:20px;padding:0}
  /* Cible de 44 px, comme les autres commandes du site : le point visible
     ne fait que 10 px mais la zone cliquable couvre le doigt. */
  .plans-hint__pt{width:44px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
  .plans-hint__pt::before{content:"";width:10px;height:10px;border-radius:60px;background:rgba(38,46,39,.24);transition:background .2s ease,transform .2s ease}
  .plans-hint__pt.is-active::before{background:var(--green);transform:scale(1.18)}
  .plans-hint__pt:focus-visible{outline:2px solid var(--green);outline-offset:-6px;border-radius:6px}
  .plan__popular{left:20px}
  .plan__rule{margin-top:18px}
  .plan__price{margin-top:20px}
  .plan__price b{font-size:48px;line-height:58px}
  .section-head+.plans{margin-top:40px}
  .plan__rule--2{margin-top:24px}
  .plan__features{margin-top:24px}
  .plan__cta{margin-top:28px}

  .sap-badge{max-width:none;padding:14px 16px;gap:14px}
  .sap-badge--grand{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}
  .retractation{padding:22px 20px;gap:16px}
  .retractation__champ{line-height:1.7}
  .retractation__trait{flex-basis:100%;min-width:0}
  .mentions-tarifs{padding:28px 22px;gap:20px}
  .mentions-tarifs__titre{font-size:22px}
  .ariane{padding-top:18px}
  .ariane__item{font-size:14px}
  .page-hero--legal{height:200px}
  .legal__maj{margin-bottom:32px}
  .legal__h2{font-size:21px;margin-bottom:14px}
  .legal__h2:not(:first-of-type){margin-top:40px;padding-top:32px}
  .legal__p,.legal__list li{font-size:1rem;line-height:1.6}
  .footer-haut{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .footer-contact li{gap:8px;font-size:0.9375rem}
  /* Le courriel tient sur une ligne : sa taille suit la largeur de la colonne
     plutot que de se couper au milieu du mot. */
  .footer-contact li{min-width:0}
  .footer-contact a[href^="mailto:"]{font-size:clamp(0.75rem,3.4vw,0.9375rem);white-space:nowrap}
  .footer-brand{grid-column:1 / -1}
  /* A 390 px chaque colonne fait ~160 px : le courriel doit pouvoir se couper. */
  .footer-contact li{gap:10px;font-size:0.9375rem;line-height:1.45;min-width:0}
  .footer-contact li a,.footer-contact li span:not(.footer-contact__ico){min-width:0;word-break:break-word}
  .footer-contact__ico{width:18px;height:18px;margin-top:2px}
  .footer-brand p{font-size:1rem;line-height:1.55}
  .footer-col__titre{font-size:1.125rem}
  .footer-col a,.footer-contact li{font-size:1rem}
  .footer-barre{margin-top:36px}
  .footer-barre__inner{flex-direction:column;align-items:flex-start;gap:20px}
  .footer-legal{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-legal li{width:auto;text-align:left}
  .site-footer{padding:48px 0 28px}
}

/* Texte reserve aux lecteurs d'ecran : retire du flux visuel sans etre
   masque aux technologies d'assistance. */
.visually-hidden{position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Impression ----------
   Les navigateurs n'impriment pas les fonds : tout texte blanc sur fond
   colore sortirait blanc sur blanc. On repasse donc ces blocs en noir sur
   blanc, et on retire ce qui n'a pas de sens sur papier. */
@media print{
  .burger,.mobile-panel,.skip-link,.socials,.footer-barre,.band,.btn-contact,
  .plans-hint,.switch,.form,.form__rgpd,.form__notice,
  .ariane,.form-block__intro{display:none!important}

  body{background:#fff}
  .container{max-width:none;padding:0 12mm}

  /* Bandeaux : la photographie ne s'imprime pas, seul le titre compte */
  .hero,.page-hero{min-height:0;padding:0 0 18px!important;background:none!important}
  .preuve{display:none}
  .header--overlay{position:static}
  .header--overlay .logo,.header--overlay .nav-list a{color:#000}
  .hero::before,.page-hero::before{display:none}
  .h-hero,.h-page,.hero__text{color:#000!important}
  .h-hero{font-size:26pt;line-height:1.2}
  .h-page{font-size:22pt;line-height:1.2}
  .h-section{font-size:16pt;line-height:1.25;color:#000}
  .h-card,.plan__badge{color:#000}
  body,.lead,.card__text,.body-gs,.legal__p,.legal__list li{color:#000;font-size:10.5pt;line-height:1.45}

  /* Formule recommandee : le fond vert ne s'imprime pas, on repasse
     en noir sur blanc avec un cadre pour la distinguer */
  .plan--featured{background:#fff!important;border:2px solid #000}
  .plan--featured *{color:#000!important}
  .plan--featured .plan__cta,.plan__cta{background:none!important;border:1px solid #000;color:#000!important}
  .plan__popular{background:none!important;border:1px solid #000;color:#000!important}
  .plan{break-inside:avoid;border-color:#000}

  /* Pastilles d'icones : le degrade disparait, le carre vide reste */
  .card__icon,.sap-badge__logo{display:none}
  .card,.card--mint,.mentions-tarifs,.retractation,.faq__item{background:none!important;border:1px solid #bbb;break-inside:avoid}

  /* Boutons : sans fond ils deviennent invisibles */
  .btn,.btn--light{background:none!important;border:1px solid #000;color:#000!important;padding:6px 12px}

  /* Reponses de la FAQ : l'ouverture est forcee par js/site.js avant
     impression ; on neutralise ici l'animation et le signe +/- */
  .faq__answer{height:auto!important;opacity:1!important;overflow:visible!important;animation:none!important}
  .faq__sign{display:none}

  .main .section{padding-top:18px}
  .site-footer{background:none!important;padding:18px 0 0;border-top:1px solid #bbb}
  /* Le fond encre ne s'imprime pas : les textes blancs seraient invisibles.
     Le pied de page porte le telephone et les horaires, c'est ce qu'un proche
     imprime pour un parent. */
  .site-footer,.site-footer *{color:#000!important}
  .footer-brand .logo--lg{color:#000!important}
  .footer-contact__ico,.site-footer .socials img{filter:none!important}
  .site-header{min-height:0;padding:0 0 12px}
  .timeline__item,.team-card,.chip{break-inside:avoid}
  h1,h2,h3{break-after:avoid}

  /* Les liens perdent leur adresse sur papier */
  a[href^="http"]::after{
    content:" (" attr(href) ")";font-size:8.5pt;color:#444;word-break:break-all}
  a[href^="tel:"]::after,a[href^="mailto:"]::after{content:""}
  a{color:#000;text-decoration:underline}
}