:root{
    --navy:#020C45;
    --blue:#27347B;
    --green:#37CF6B;
    --green-ink:#1B7E45;
    --surface:#F4F6FB;
    --line:#E6EAF5;
    --warn:#A35F0D;
    --white:#FFFFFF;

    --display:"aquavit","Futura","Futura PT","Avenir Next","Century Gothic",sans-serif;
    --body:"futura-100-latin-ext","Futura PT","Futura","Avenir Next","Century Gothic",Verdana,sans-serif;
    --ui:"futura-100-latin-ext","Futura PT","Futura","Avenir Next","Century Gothic",Verdana,sans-serif;

    --hover-shadow:0 4px 16px rgba(2,12,69,.12);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:104px}
  body{font-family:var(--body);font-size:17px;line-height:1.65;color:var(--navy);background:var(--white)}
  img{display:block;max-width:100%;height:auto}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--navy);outline-offset:2px}
  .on-navy :focus-visible,.story :focus-visible{outline-color:var(--white)}

  .wrap{max-width:1152px;margin:0 auto;padding:0 24px}
  section{padding:64px 0}

  /* Typographie */
  h1,h2{font-family:var(--display)}
  h1{font-weight:700;font-size:clamp(36px,4.2vw,50px);line-height:1.1;letter-spacing:-.02em;max-width:22ch}
  h2{font-weight:700;font-size:clamp(28px,3.2vw,36px);line-height:1.2;letter-spacing:-.02em;max-width:26ch}
  h3{font-family:var(--ui);font-weight:500;font-size:clamp(20px,2vw,24px);line-height:1.3;color:var(--blue)}
  h4{font-family:var(--ui);font-weight:600;font-size:16px;line-height:1.4;color:var(--blue)}
  .accent{color:var(--green-ink)}
  .on-navy .accent,.story .accent{color:var(--green)}
  .on-navy h3,.on-navy h4{color:var(--white)}
  .eyebrow{font-family:var(--ui);font-weight:600;font-size:12px;line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
  .on-navy .eyebrow,.story .eyebrow{color:var(--green)}
  /* Surtitre placé dans le H1 (SEO) : même rendu qu'un surtitre au-dessus du titre */
  h1 .eyebrow{display:block;margin-bottom:8px}
  .head{margin-bottom:32px}
  .chapo{font-size:20px;line-height:1.5;color:rgba(2,12,69,.8);max-width:52ch}
  .on-navy .chapo{color:rgba(255,255,255,.85)}
  p{max-width:62ch}
  p+p{margin-top:16px}
  .muted{color:rgba(2,12,69,.6)}
  .for{font-style:italic;color:rgba(2,12,69,.6);margin-top:12px}
  strong{font-family:var(--ui);font-weight:600}

  /* Annotations de maquette (hors charte, à retirer à l'intégration) */
  .todo{display:inline-block;font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.05em;color:var(--warn);border:1px dashed var(--warn);border-radius:6px;padding:1px 6px;background:#fff}
  .note{border:1px dashed var(--warn);border-radius:12px;padding:16px 20px;color:var(--warn);font-size:14px;line-height:1.5;margin-top:20px;max-width:none}

  /* Boutons */
  .btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:12px 24px;border-radius:999px;font-family:var(--ui);font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,filter .15s}
  .btn-primary{background:var(--green);color:var(--navy)}
  .btn-primary:hover{filter:brightness(.95)}
  .btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
  .btn-outline:hover{background:var(--navy);color:var(--white)}
  .on-navy .btn-outline{border-color:rgba(255,255,255,.55);color:var(--white)}
  .on-navy .btn-outline:hover{background:var(--white);color:var(--navy)}
  .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

  /* En-tête */
  header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
  .nav{display:flex;align-items:center;justify-content:space-between;height:88px;gap:16px}
  .nav img{height:84px;width:auto;max-width:none;flex-shrink:0;margin:-14px 0 -14px -22px}
  .nav ul{display:flex;align-items:center;gap:32px;list-style:none}
  .nav ul a:not(.btn){font-family:var(--ui);font-size:16px;text-decoration:none}
  .nav ul a:not(.btn):hover,.nav ul a[aria-current="page"]{color:var(--green-ink);text-decoration:underline;text-underline-offset:6px}

  /* Ouvertures navy */
  .hero{background:var(--navy);color:var(--white);padding:80px 0}
  .hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
  .hero .chapo{margin-top:24px}
  .hero-sm{padding:72px 0 64px}
  .hero-picto{justify-self:center;width:100%;max-width:340px}
  .hero-picto img{width:100%;height:auto}
  .hero-illu{border-radius:12px;overflow:hidden;background:var(--white)}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;list-style:none}
  .chips a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);font-family:var(--ui);font-weight:600;font-size:14px;color:var(--white);text-decoration:none}
  .chips a:hover{border-color:var(--green);color:var(--green)}

  /* Cartes */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
  .card-edge{background:var(--surface);border-left:3px solid var(--green);border-radius:12px;padding:24px}
  .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

  /* Offres (accueil) */
  .offers-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
  .offers-head .head{margin-bottom:0}
  .offer{display:flex;flex-direction:column}
  .offer h3{margin-bottom:12px}
  .hook{font-style:italic;color:rgba(2,12,69,.7)}
  .more{margin-top:auto;padding-top:16px;font-family:var(--ui);font-weight:600;font-size:15px;color:var(--green-ink);text-decoration:underline;text-underline-offset:3px;align-self:flex-start}

  /* Bloc de récit */
  .story{background:var(--blue);color:var(--white);border-radius:12px;padding:28px 32px;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
  .story h2{color:var(--white)}
  .story p{color:rgba(255,255,255,.9)}
  .story strong{color:var(--white)}
  /* Coulisses (accueil) : version A */
  /* Section « Le nom » : titre en haut à gauche, puis deux colonnes de texte alignées */
  .story-name{grid-template-areas:"head ." "left right";row-gap:24px}
  .story-name .sn-head{grid-area:head}
  .story-name .sn-left{grid-area:left}
  .story-name .sn-right{grid-area:right}
  .story-a{padding:40px;grid-template-columns:1fr 1fr;align-items:center}
  .story-a .eyebrow{color:var(--white)}
  .story .punch{font-family:var(--ui);font-weight:600;color:var(--green)}
  .a-pills{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:24px;list-style:none}
  .a-pills li{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;font-family:var(--ui);font-size:14px;font-weight:600;color:var(--white)}
  .a-pills b{color:var(--green);margin-right:6px}
  .a-side{display:grid;justify-items:start}
  .story .more-light{margin-top:20px;padding-top:0;color:var(--white);text-decoration-color:var(--green)}
  .story .more-light:hover{color:var(--green)}
  .a-panel{background:var(--white);color:var(--navy);border-radius:12px;padding:28px}
  .story .a-panel>p{color:var(--navy);font-family:var(--ui);font-weight:600}
  .a-list{list-style:none;display:grid;gap:18px;margin-top:20px}
  .a-list li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
  .a-list .dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:var(--navy)}
  .a-list li:nth-child(2) .dot{background:var(--blue);color:var(--white)}
  .a-list svg{width:22px;height:22px}
  .a-list h3{font-size:17px;font-weight:600;margin-bottom:2px;color:var(--blue)}
  .story .a-list p{font-size:17px;line-height:1.55;color:rgba(2,12,69,.8)}

  /* Listes à coches */
  .checks{list-style:none;display:grid;gap:12px}
  .checks li{position:relative;padding-left:32px}
  .checks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;background:url("assets/coche-verte.png") no-repeat center/contain}

  /* Frise d'étapes (accueil) */
  .process{background:var(--navy);color:var(--white);padding:80px 0}
  .process-head{text-align:center;margin:0 auto 56px}
  .process-head h2{margin:0 auto}
  .process-head .eyebrow,.closing .eyebrow,.closing-band .eyebrow{margin-left:auto;margin-right:auto;text-align:center}
  .process-head .eyebrow,.closing .eyebrow{color:var(--white)}
  .process-head .chapo{margin:16px auto 0;max-width:56ch}
  .timeline{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
  .timeline-line{position:absolute;top:36px;left:calc(12.5% + 24px);right:calc(12.5% + 24px);height:2px;background:rgba(255,255,255,.18);overflow:hidden}
  .timeline-line span{display:block;height:100%;width:0;background:var(--green);transition:width 1.6s ease}
  .timeline.on .timeline-line span{width:100%}
  .tl-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px;position:relative;z-index:1;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
  .timeline.on .tl-step{opacity:1;transform:none}
  .timeline.on .tl-step:nth-child(3){transition-delay:.25s}
  .timeline.on .tl-step:nth-child(4){transition-delay:.5s}
  .timeline.on .tl-step:nth-child(5){transition-delay:.75s}
  .tl-circle{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;position:relative;margin-bottom:20px;border:2px solid rgba(255,255,255,.18)}
  .tl-step:nth-child(odd) .tl-circle{background:var(--blue);color:var(--white)}
  .tl-step:nth-child(even) .tl-circle{background:var(--green);color:var(--navy)}
  .tl-circle svg{width:28px;height:28px}
  .tl-num{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:var(--white);color:var(--navy);font-family:var(--ui);font-weight:600;font-size:12px;display:grid;place-items:center}
  .tl-trig{font-family:var(--ui);font-weight:600;font-size:10px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:4px}
  .tl-step h3{font-size:20px;margin-bottom:12px}
  .tl-txt{color:rgba(255,255,255,.7);font-size:15px;line-height:1.6;width:200px;max-width:100%;hyphens:none;-webkit-hyphens:none}
  .tl-tag{margin-bottom:14px;display:inline-block;font-family:var(--ui);font-weight:600;font-size:11px;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--green);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);border-radius:999px;padding:6px 10px}
  @media (prefers-reduced-motion:reduce){.tl-step,.timeline-line span{transition:none}}

  /* Clôtures navy */
  .closing-band{background:var(--navy);color:var(--white);padding:80px 0;text-align:center}
  .closing{margin-top:72px;padding-top:56px;border-top:1px solid rgba(255,255,255,.18);text-align:center}
  .closing h2,.closing-band h2{margin:0 auto}
  .closing .chapo,.closing-band .chapo{margin:16px auto 0}
  .closing .ctas,.closing-band .ctas{justify-content:center}

  /* Services : offres détaillées */
  .svc{border-top:0}
  .svc-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
  .svc-aside{position:sticky;top:120px}
  .svc-aside p:not(.eyebrow):not(.for){margin-top:16px}
  .svc-body{display:grid;gap:32px}
  .svc-body h3{margin-bottom:16px}
  .svc-body .card-edge ul{list-style:none;display:grid;gap:12px}
  .svc-body .card-edge li{position:relative;padding-left:20px}
  .svc-body .card-edge li::before{content:"→";position:absolute;left:0;color:var(--green-ink);font-family:var(--ui);font-weight:600}
  .sub{font-family:var(--ui);font-weight:600;font-size:16px;color:var(--blue);margin:20px 0 12px}
  .sub:first-of-type{margin-top:0}
  .gains{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none}
  .gains li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;font-family:var(--ui);font-weight:600;font-size:15px;line-height:1.4}
  .price{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
  .price p{max-width:44ch}
  .price .val{font-family:var(--ui);font-weight:600;font-size:24px;line-height:1.2;color:var(--green-ink);white-space:nowrap;text-align:right}
  .price .val small{display:block;font-weight:400;font-size:14px;color:rgba(2,12,69,.6)}
  .vals{display:flex;gap:32px;flex-wrap:wrap}
  .vals .val{text-align:left}
  .svc + .svc{padding-top:0}
  .svc-sep{border:0;border-top:1px solid var(--line);margin-bottom:64px}

  .svc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
  .svc-card{padding:32px;display:flex;flex-direction:column}
  .svc-note{margin:40px auto 0;max-width:820px;text-align:center;font-size:19px;line-height:1.6;color:var(--blue);font-style:italic}
  .svc-icon{width:64px;height:64px;border-radius:50%;background:var(--green);color:var(--navy);display:grid;place-items:center;margin-bottom:24px;flex-shrink:0}
  .svc-icon.is-blue{background:var(--blue);color:var(--white)}
  .svc-icon svg{width:28px;height:28px}
  .svc-title{font-size:clamp(24px,2.4vw,28px);max-width:none}
  .svc-card>p:not(.eyebrow):not(.for){margin-top:12px}
  .svc-card .for{margin-bottom:4px}
  .svc-scope{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
  .svc-scope h3{font-size:18px;margin-bottom:16px}
  .svc-scope .checks{font-size:16px;line-height:1.55}
  .svc-scope .note{font-size:13px}
  .head-wide h2,.head-wide .chapo{max-width:none}
  .plans{grid-template-rows:auto auto 1fr;row-gap:0}
  .plan{background:var(--white);padding:32px;display:grid;grid-template-rows:subgrid;grid-row:span 3}
  .plan h3{margin-bottom:4px}
  .plan .for{margin:0 0 20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
  .plan .checks{font-size:16px;line-height:1.5;align-self:start}
  .tarifs{margin:20px 0 0;padding:24px 32px}
  .tarifs p{max-width:none;font-size:15px;font-style:italic}
  .svc-note strong{font-style:normal;font-family:var(--ui);font-weight:600;color:var(--navy)}
  .reassure{margin:32px auto 0;text-align:center;font-family:var(--ui);font-weight:600;font-size:15px;color:var(--blue);max-width:none}
  /* Tableau des tarifs */
  table{width:100%;border-collapse:collapse;font-size:16px}
  th,td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
  thead th{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid var(--line);color:var(--blue)}
  tbody th{font-family:var(--ui);font-weight:600}
  td.hl,th.hl{background:var(--surface)}
  thead th.hl{color:var(--green-ink)}

  /* FAQ */
  .faq-toggle>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;width:fit-content}
  .faq-toggle>summary::-webkit-details-marker{display:none}
  .faq-toggle>summary::after{content:"+";font-family:var(--ui);font-weight:600;font-size:32px;line-height:1;color:var(--green-ink);width:40px;height:40px;border:2px solid var(--line);border-radius:50%;display:grid;place-items:center;flex-shrink:0}
  .faq-toggle[open]>summary::after{content:"−"}
  .faq-toggle>summary:hover::after{border-color:var(--green-ink)}
  .faq-toggle .faq{margin-top:32px}
  .faq{display:grid;gap:12px;max-width:820px}
  .faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 24px}
  .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;font-family:var(--ui);font-weight:600;font-size:17px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--green-ink)}
  .faq details[open] summary::after{content:"−"}
  .faq details p{max-width:70ch;padding-bottom:20px}

  /* À propos */
  .two-col{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
  .intro-me .punch{font-family:var(--ui);font-weight:600;font-size:20px;color:var(--green-ink)}
  .intro-me .lead{font-size:20px;line-height:1.5;max-width:none}
  .facts{list-style:none;display:grid;gap:12px}
  .facts li{display:flex;gap:16px;align-items:baseline}
  .facts b{font-family:var(--ui);font-weight:600;font-size:24px;color:var(--green-ink);min-width:88px}

  /* Contact */
  .steps{list-style:none;counter-reset:s}
  .steps li{counter-increment:s}
  .steps li::before{content:counter(s);display:block;font-family:var(--ui);font-weight:600;font-size:30px;line-height:1;color:var(--green-ink);margin-bottom:12px}
  .steps h3{font-size:20px;margin-bottom:14px}
  .trig{font-family:var(--ui);font-weight:600;font-size:12px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:rgba(2,12,69,.6);margin-bottom:4px}
  .tag-light{display:inline-block;font-family:var(--ui);font-weight:600;font-size:11px;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:var(--green-ink);background:var(--white);border:1px solid var(--line);border-radius:14px;padding:6px 10px}
  .fmt-n{font-family:var(--ui);font-weight:600;font-size:30px;line-height:1;color:var(--green-ink);margin-bottom:12px}
  .fmt h3{margin-bottom:8px}
  .steps p{font-size:16px}
  .booking-section{padding-bottom:0}
  .cal-embed{background:var(--white);padding:8px;min-height:640px;overflow:hidden}
  /* Le module Cal.com ajuste lui-même la hauteur de son iframe : pas de double barre de défilement */
  .cal-embed #my-cal-inline-appel-decouverte{min-height:620px;height:auto!important;overflow:visible!important}
  form{display:grid;gap:20px}
  .field{display:grid;gap:4px}
  label{font-family:var(--ui);font-weight:600;font-size:14px}
  label .opt{font-weight:400;color:rgba(2,12,69,.6)}
  input,textarea{font:inherit;font-size:17px;color:var(--navy);background:var(--white);border:2px solid var(--line);border-radius:8px;padding:12px 16px;width:100%}
  input:focus,textarea:focus{outline:none;border-color:var(--blue)}
  input::placeholder,textarea::placeholder{color:rgba(2,12,69,.6);opacity:1}
  textarea{min-height:140px;resize:vertical}
  .help{font-size:14px;line-height:1.5;color:rgba(2,12,69,.6)}
  .err{font-size:14px;color:var(--warn)}
  .field.has-err input{border-color:var(--warn)}
  .consent{font-size:13px;line-height:1.5;color:rgba(2,12,69,.6);max-width:none}
  .consent a{color:var(--green-ink)}
  .direct{display:grid;gap:16px}
  fieldset{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
  legend{font-family:var(--ui);font-weight:600;font-size:14px;padding:0;margin-bottom:4px}
  legend .opt{font-weight:400;color:rgba(2,12,69,.6)}
  .opts{display:flex;flex-wrap:wrap;gap:8px}
  .opts label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:2px solid var(--line);border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;background:var(--white)}
  .opts input{width:18px;height:18px;padding:0;margin:0;accent-color:var(--green-ink)}
  .opts label:has(input:checked){border-color:var(--green-ink);background:rgba(55,207,107,.1)}
  .opts label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
  .direct a{color:var(--green-ink);font-family:var(--ui);font-weight:600}

  /* Mentions légales */
  .legal{max-width:760px}
  .legal h2{font-size:clamp(24px,2.6vw,28px);margin:48px 0 16px}
  .legal h2:first-child{margin-top:0}
  .legal dl{display:grid;grid-template-columns:200px 1fr;gap:8px 24px;font-size:16px}
  .legal dt{font-family:var(--ui);font-weight:600}
  .legal p,.legal li{font-size:16px}
  .legal ul{padding-left:0;list-style:none;display:grid;gap:8px;margin-top:12px}
  .legal ul li{padding-left:20px;position:relative}
  .legal ul li::before{content:"→";position:absolute;left:0;color:var(--green-ink)}
  .legal a{color:var(--green-ink)}
  .legal h3{font-size:18px;margin:24px 0 8px}
  .legal-toc{margin-bottom:16px}
  .legal-toc ol{list-style:none;padding-left:0;columns:2;column-gap:32px;font-size:15px;line-height:1.5}
  .legal-toc li{margin-bottom:6px;break-inside:avoid}
  .legal-toc a{text-decoration:none}
  .legal-toc a:hover{text-decoration:underline}
  .legal .table-scroll{overflow-x:auto;margin-top:16px}
  .legal table{font-size:15px;min-width:560px}
  .legal tbody th{font-weight:600;width:34%}
  .legal .note{font-size:14px}

  footer{background:var(--white);color:rgba(2,12,69,.7);border-top:1px solid var(--line);padding:40px 0;font-size:14px;line-height:1.5}
  .foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
  .foot img{height:72px;width:auto;margin:-12px 0 -12px -20px}
  .foot nav{display:flex;gap:24px;flex-wrap:wrap;justify-content:flex-end}
  .foot-links{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
  .foot-copy{font-size:13px;max-width:none;text-align:right}
  @media (max-width:767px){.foot-links{align-items:flex-start}.foot nav{justify-content:flex-start}.foot-copy{text-align:left}}
  /* Pied de page bleu : pages Contact et pages légales */
  footer.foot-dark{background:var(--navy);color:rgba(255,255,255,.7);border-top-color:rgba(255,255,255,.18)}
  footer.foot-dark .foot img{filter:brightness(0) invert(1)}
  footer.foot-dark .foot a:hover{color:var(--white)}
  footer.foot-dark .socials a{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);color:var(--white)}
  footer.foot-dark .socials a:hover{border-color:var(--green);color:var(--green)}
  footer.foot-dark :focus-visible{outline-color:var(--white)}
  .foot a{text-decoration:none}
  .foot a:hover{color:var(--green-ink);text-decoration:underline}
  /* Icônes des réseaux sur fond blanc : cercle surface, filet line, picto navy au trait 20 px */
  .foot-id{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}
  .socials{display:flex;gap:8px;list-style:none}
  .socials a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--navy);transition:border-color .15s,color .15s}
  .socials a:hover{border-color:var(--green-ink);color:var(--green-ink);text-decoration:none}
  .socials svg{width:20px;height:20px}

  /* Barre de navigation de la maquette */

  .menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--navy);border-radius:999px;background:var(--white);color:var(--navy);cursor:pointer;flex-shrink:0;padding:0}
  .menu-toggle svg{width:22px;height:22px}
  .menu-toggle .i-close{display:none}
  .menu-toggle[aria-expanded="true"] .i-open{display:none}
  .menu-toggle[aria-expanded="true"] .i-close{display:block}
  .menu-panel{display:none}

  @media (max-width:1199px){
    .plans{grid-template-rows:none;row-gap:20px}
    .plan{display:flex;flex-direction:column;grid-row:auto}
      .tl-tag{white-space:normal;border-radius:14px}
    .grid-3{grid-template-columns:repeat(2,1fr)}
    .grid-4{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:900px){
    .timeline{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
    .timeline-line{display:none}
    .svc-grid,.two-col,.svc-cards{grid-template-columns:1fr;gap:32px}
    .svc-aside{position:static}
  }
  @media (max-width:767px){
    .hero-picto{max-width:220px}
    .hero{padding:64px 0}
    .hero-grid,.story,.grid-2,.grid-3,.grid-4,.gains{grid-template-columns:1fr}
    .story-name{grid-template-areas:"head" "left" "right";row-gap:16px}
    .nav{height:72px}
    .nav img{height:64px;margin:-10px 0 -10px -16px}
    .nav ul li:not(:last-child){display:none}
    .nav ul{margin-left:auto}
    .menu-toggle{display:inline-flex}
    .menu-panel{display:block;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);box-shadow:var(--hover-shadow);padding:4px 16px 12px}
    .menu-panel[hidden]{display:none}
    .menu-panel a{display:flex;align-items:center;min-height:52px;font-family:var(--ui);font-weight:600;font-size:18px;text-decoration:none;border-bottom:1px solid var(--line)}
    .menu-panel a:last-child{border-bottom:0}
    .menu-panel a[aria-current="page"]{color:var(--green-ink)}
    .story,.story-a{padding:28px 20px;gap:24px}
    .a-panel{padding:24px 20px}
    .legal dl{grid-template-columns:1fr;gap:2px}
    .legal dd{margin-bottom:12px}
    .legal-toc ol{columns:1}
    .price .val{text-align:left}
    table{font-size:15px}
    th,td{padding:10px 8px}
  }
  @media (max-width:520px){.timeline{grid-template-columns:1fr}}
  @media (max-width:480px){
    .wrap{padding:0 16px}
    .nav{gap:8px}
    .nav ul .btn{padding:8px 14px;font-size:14px;min-height:44px}
    .nav .btn-more{display:none}
    .nav img{height:48px;margin:-8px 0 -8px -12px}
  }
  /* Ajouts site en ligne */
  .skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--navy);color:var(--white);padding:10px 16px;border-radius:8px;font-family:var(--ui);font-weight:600;text-decoration:none}
  .skip:focus{top:12px}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .form-status{margin-top:14px;font-weight:500}
  .form-status.is-ok{color:var(--green-ink)}
  .form-status.is-error{color:var(--warn)}
  .err[hidden]{display:none}