/* Socle commun du site DermADN.
   Extrait le 2026-09-10 des blocs <style> des pages (chantier 1 du
   brief) : ces regles y etaient recopiees a l'identique.
   Critere : regle presente dans LES 23 pages concernees, pas
   dans une majorite d'entre elles. Une regle qui manquerait a une seule
   page lui serait ajoutee ici, ce qui changerait son rendu.
   bon-cadeau.html et reservation.html (FR et EN) ne chargent pas ce
   fichier : leur CSS a ete ecrit separement et il leur manque une
   centaine de ces regles. Voir extraire_css.py pour le detail.
   Chaque page charge ce fichier AVANT son <style>, qui ne contient plus
   que ce qui lui est propre et continue donc de surcharger ce socle.
   Ne pas y ajouter de regle propre a une seule page. */

:root{
    color-scheme: light only;
    --bone:#EFEEE6;
    --bone-2:#E7E2D8;
    --ink:#1D1916;
    --ink-soft:#4C443B;
    --accent:#A97C5D;
    /* Même famille que --accent, assombrie pour les TEXTES DE PETITE TAILLE.
       #A97C5D sur le fond --bone donne un contraste de 3,15, sous le seuil
       recommandé de 4,5 : lisible pour un grand titre, difficile pour une
       ligne en 11,5 px lue dehors sur un téléphone. Cette variante atteint
       4,57. Ne pas l'utiliser pour les grands titres ni les filets, où
       --accent garde sa justesse. */
    --accent-lisible:#896349;
    --accent-2:#C9A283;
    /* Terracotta de --clay, assombrie pour rester lisible en petit texte :
       #BE6F45 ne donne que 3,25 de contraste sur --bone, celle-ci 4,55.
       Réservée au repère "vous êtes ici" du menu, pour qu'elle ne se
       confonde ni avec --accent (survol, icône cookies) ni avec le texte. */
    --clay-lisible:#9C5B39;

    --accent-soft:#F1E4D8;
    --clay:#BE6F45;
    --clay-soft:#F3DCC9;
    --line:#D9D3C6;
    --muted:#6B6359;
    --white:#FBFAF7;
    --radius:3px;
    --maxw:1180px;
    --ease:cubic-bezier(.16,1,.3,1);
    --shadow:0 18px 36px -22px rgba(29,25,22,.4);
  }
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; background:#EFEEE6;}
  /* Les sections nommées sont les cibles des ancres du menu (#soins,
     #signature, #contact...). Sans cette marge, le haut de la section arrive
     SOUS le bandeau collant (76 px) et son intitulé reste caché : on atterrit
     au milieu du premier paragraphe. Posé sur section[id] et pas globalement,
     pour ne pas s'ajouter aux scroll-margin déjà réglés ailleurs
     (.tarif-card, .faq-entry). */
  section[id]{ scroll-margin-top:92px; }
body{
    background:var(--bone);
    color:var(--ink);
    font-family:'Sora', 'Sora secours', sans-serif;
    font-weight:400;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
::selection{background:var(--accent); color:var(--bone);}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; color:inherit;}
:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }
.wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 32px;
  }
.eyebrow{
    font-family:'JetBrains Mono', 'JetBrains secours', monospace;
    font-size:11.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--accent-lisible);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
.eyebrow::before{
    content:"";
    width:16px; height:1px;
    background:var(--accent);
    display:inline-block;
  }
h1,h2,h3{
    font-family:'Fraunces', 'Fraunces secours', serif;
    font-weight:500;
    line-height:1.08;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
em, .accent-word{
    font-style:italic;
    font-weight:500;
    color:var(--accent);
  }
.btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 26px;
    border-radius:var(--radius);
    font-size:14.5px;
    font-weight:500;
    letter-spacing:0.01em;
    transition:all .35s var(--ease);
    border:1px solid transparent;
    white-space:nowrap;
  }
.btn-primary{
    background:var(--ink);
    color:var(--bone);
  }
.btn-primary:hover{background:var(--accent);}
.btn-ghost{
    border-color:var(--ink);
    color:var(--ink);
  }
.btn-ghost:hover{
    background:var(--ink);
    color:var(--bone);
  }
/* Un mot plus long que l'écran ne se coupe pas tout seul : « Photobiomodulation »
   en 32 px sur un téléphone de 320 px débordait de 55 px, sur les deux pages
   LED. `hyphens:auto` coupe proprement, avec un tiret, en s'appuyant sur la
   langue déclarée sur <html> (d'où l'importance du lang="fr" / lang="en") ;
   `break-word` sert de filet quand aucune césure n'est possible. Posé sur les
   titres seuls : le texte courant a toujours des espaces où se couper.
   `hyphens:manual` et non `auto` : le dictionnaire du navigateur ignore la
   formation des mots techniques et coupait « Photobiomo-dulation ». En manuel,
   il ne coupe QUE sur les `&shy;` posés dans le HTML — d'où
   « Photobio&shy;modulation », qui respecte photo + bio + modulation.
   Réglé à la racine plutôt que sur ce titre-là, pour que le prochain nom de
   soin un peu long ne repose pas le problème. */
h1, h2, h3, h4{ overflow-wrap:break-word; hyphens:manual; }

.btn svg{width:14px; height:14px; transition:transform .25s ease;}
.btn:hover svg{transform:translateX(3px);}

/* Sur écran très étroit, un libellé long ne tient pas sur une ligne et
   `white-space:nowrap` le faisait alors dépasser de la page : le bouton
   « Voir toutes les contre-indications » mesurait 308 px dans un conteneur
   de 276, et poussait les 18 pages de soin à 330 px de large pour 320 px
   visibles. On l'autorise donc à passer à la ligne en dessous de 430 px.
   Le bouton du header garde `nowrap` : à cette taille il affiche déjà
   « RDV » (voir .btn-short), il n'a aucune raison de se casser en deux. */
@media (max-width: 430px){
  .btn{ white-space:normal; max-width:100%; text-align:center; }
  .nav-cta .btn{ white-space:nowrap; }
}
/* ===== SIGNATURE GRAPHIQUE ===== */


.hero-grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:40px;
    align-items:center;
  }
.hero > .eyebrow{ animation:fadeUp .9s var(--ease) both; }
.hero h1{ animation:fadeUp .9s var(--ease) .1s both; }
.hero p.lead{ animation:fadeUp .9s var(--ease) .2s both; }
.hero-actions{ animation:fadeUp .9s var(--ease) .3s both; }
.hero-stats{ animation:fadeUp .9s var(--ease) .4s both; }
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }
.hero-stats{
    display:flex;
    gap:36px;
    padding-top:28px;
    border-top:1px solid var(--line);
    max-width:520px;
  }
.hero-stats div strong{
    display:block;
    font-family:'Fraunces', 'Fraunces secours', serif;
    font-size:26px;
    font-weight:500;
    color:var(--accent);
  }
.hero-stats div span{
    font-family:'JetBrains Mono', 'JetBrains secours', monospace;
    font-size:11px;
    letter-spacing:0.06em;
    color:var(--muted);
    text-transform:uppercase;
  }
.hero-glow{
    position:absolute;
    width:64%;
    aspect-ratio:1;
    background:radial-gradient(circle, var(--accent-soft) 0%, rgba(241,228,216,0) 72%);
    border-radius:50%;
    filter:blur(6px);
  }
@keyframes floatIcon{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-14px); }
  }
@keyframes glowPulse{
    0%,100%{ transform:scale(1); opacity:.75; }
    50%{ transform:scale(1.08); opacity:1; }
  }
/* ===== SECTION SCAFFOLDING ===== */
  section{ padding:108px 0; position:relative; }
.section-head{
    max-width:640px;
    margin-bottom:56px;
  }
.section-head h2{
    font-size:clamp(30px, 3.6vw, 44px);
    margin-top:16px;
  }
.section-head p{
    margin-top:18px;
    color:var(--muted);
    font-size:15.5px;
    max-width:540px;
  }
.divider{
    height:1px;
    background:var(--line);
    width:100%;
  }
/* reveal on scroll */
  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
.reveal.in{ opacity:1; transform:translateY(0); }
.stagger > *{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .65s var(--ease), transform .65s var(--ease);
  }
.stagger.in{ opacity:1; transform:none; }
.stagger.in > *{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
    .reveal, .stagger > *{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
  }
/* ===== PHILOSOPHY ===== */
  .philo{ background:var(--white); }
.philo-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:70px;
    align-items:start;
  }
.philo-grid h3{
    font-size:clamp(26px,3vw,34px);
    margin-bottom:18px;
  }
.philo-grid > div:first-child p{
    color:var(--ink-soft);
    font-size:15.5px;
    margin-bottom:14px;
  }
.philo-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
.philo-feature{
    background:var(--white);
    padding:28px 26px;
  }
.philo-feature .num{
    font-family:'JetBrains Mono', 'JetBrains secours', monospace;
    font-size:11px;
    color:var(--clay);
    letter-spacing:0.08em;
  }
.philo-feature h4{
    font-family:'Fraunces', 'Fraunces secours', serif;
    font-weight:500;
    font-size:18px;
    margin:10px 0 8px;
  }
.philo-feature p{
    font-size:13.5px;
    color:var(--muted);
  }
@media (max-width:860px){
    .philo-grid{ grid-template-columns:1fr; gap:40px; }
  }
@media (max-width:560px){
    .philo-features{ grid-template-columns:1fr; }
  }
/* ===== SOINS ===== */
  .soins-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
.soin-code{
    font-family:'JetBrains Mono', 'JetBrains secours', monospace;
    font-size:11.5px;
    color:var(--accent-lisible);
    letter-spacing:0.1em;
  }
.soin-card h3{
    font-size:23px;
    margin:14px 0 12px;
  }
.soin-card p{
    color:var(--muted);
    font-size:14.5px;
    margin-bottom:20px;
    max-width:420px;
  }

/* ---- Soin "à venir" (posé par assets/soins-a-venir.js) ----
   La case "actif" décochée dans tarifs.php, côté outil interne. Ces règles
   vivaient dans le <style> de index.html : elles montent ici parce que les
   pages de soin en ont besoin aussi, et parce que la version anglaise de
   l'accueil ne les avait tout simplement jamais eues.
   La carte reste CLIQUABLE : seule son apparence change (demande de Nicolas,
   2026-09-12). Ne pas y ajouter pointer-events:none. */
/* ---- FAQ d'une page de soin (accordéon) ----
   Le même geste que la page FAQ (on clique une ligne, un panneau s'ouvre,
   une seule ligne ouverte à la fois), mais à l'échelle de la QUESTION et non
   de la catégorie : sur une page de soin il n'y a qu'une catégorie, et le
   grand titre Fraunces de faq.html y serait démesuré.
   Contenu engendré depuis faq.html — voir outils/synchro-faq-soins.py — et
   déplié par assets/faq-soin.js.

   Ces quatre premières règles étaient recopiées dans le <style> des 18 pages
   de soin ; elles montent ici, comme le reste du socle. */
.soin-faq{ border-top:1px solid var(--line); padding-top:6px; margin-top:8px; }
.soin-faq > div{ border-bottom:1px solid var(--line); }
.soin-faq h3{ font-size:15.5px; font-weight:500; margin-bottom:7px; }
.soin-faq p{ margin:0; font-size:14.5px; }

.soin-faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 0;
    border:0;
    background:none;
    text-align:left;
    font-family:'Sora', 'Sora secours', sans-serif;
    font-size:15.5px;
    font-weight:500;
    line-height:1.5;
    color:var(--ink-soft);
    cursor:pointer;
    transition:color .25s var(--ease);
  }
.soin-faq-question:hover{ color:var(--ink); }
.soin-faq-entree.is-open > .soin-faq-question{ color:var(--clay-lisible); }
.soin-faq-chevron{
    display:none;
    width:15px;
    height:15px;
    flex:0 0 auto;
    color:var(--accent);
    transition:transform .3s var(--ease);
  }
.soin-faq.js-pret .soin-faq-chevron{ display:block; }
.soin-faq:not(.js-pret) .soin-faq-question{ cursor:default; }
.soin-faq-entree.is-open .soin-faq-chevron{ transform:rotate(180deg); }
/* grid-template-rows 0fr -> 1fr : la seule façon d'animer vers une hauteur
   "auto" sans la mesurer en JS. Même procédé que .faq-panel sur faq.html.

   Le repli est conditionné à la classe .js-pret, posée par faq-soin.js : par
   défaut, sans JavaScript, les six réponses sont VISIBLES et la flèche est
   masquée. Une FAQ qu'on ne pourrait pas ouvrir serait pire que pas de FAQ,
   et c'est aussi ce que lisent les moteurs de recherche. */
.soin-faq-reponse{ display:grid; grid-template-rows:1fr; }
.soin-faq-reponse > div{ min-height:0; overflow:hidden; }
.soin-faq.js-pret .soin-faq-reponse{
    grid-template-rows:0fr;
    opacity:0;
    transition:grid-template-rows .38s var(--ease), opacity .28s var(--ease);
  }
.soin-faq.js-pret .soin-faq-entree.is-open > .soin-faq-reponse{ grid-template-rows:1fr; opacity:1; }
.soin-faq-reponse p{ color:var(--muted); line-height:1.75; padding-bottom:18px; }
.soin-faq-tout{ margin-top:16px; font-size:13.5px; }
.soin-faq-tout a{
    color:var(--accent-lisible);
    box-shadow:inset 0 -1px 0 var(--accent-2);
    transition:box-shadow .22s var(--ease), color .22s var(--ease);
  }
.soin-faq-tout a:hover{ color:var(--ink); box-shadow:inset 0 -1px 0 var(--accent); }
.soin-card.is-disabled{ opacity:.6; }
.soin-card.is-disabled:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.soin-card-tag-avenir{
    position:absolute; top:14px; right:14px;
    font-family:'JetBrains Mono', 'JetBrains secours', monospace; font-size:9.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); background:var(--white); border:1px solid var(--line);
    border-radius:20px; padding:3px 9px;
  }
/* Même pastille, mais dans le fil du titre de la page du soin : elle doit se
   lire en même temps que le nom du soin, pas seulement par qui descend
   jusqu'au paragraphe. */
.soin-avenir-pastille{
    align-self:center;
    font-family:'JetBrains Mono', 'JetBrains secours', monospace;
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--clay-lisible);
    background:var(--clay-soft);
    border:1px solid var(--accent-2);
    border-radius:20px;
    padding:4px 11px;
    white-space:nowrap;
  }
.soin-avenir-encart{
    display:flex;
    flex-direction:column;
    gap:5px;
    max-width:640px;
    margin-top:18px;
    padding:16px 18px;
    background:var(--accent-soft);
    border-left:2px solid var(--accent);
    font-size:14.5px;
    line-height:1.65;
    color:var(--ink-soft);
  }
/* La phrase "Ce soin se réserve en ligne, séance par séance ou en forfait"
   du bas de page contredit l'encart quand le soin n'est pas encore proposé.
   Masquée plutôt que réécrite : elle redeviendra vraie toute seule le jour où
   la case "actif" sera cochée dans l'outil. */
body.soin-est-a-venir .soin-fin .soin-option{ display:none; }
.soin-avenir-encart strong{
    font-family:'JetBrains Mono', 'JetBrains secours', monospace;
    font-size:11px;
    letter-spacing:.07em;
    text-transform:uppercase;
    font-weight:500;
    color:var(--clay-lisible);
  }
.soin-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:20px;
  }
.soin-tags span{
    font-size:11.5px;
    font-family:'JetBrains Mono', 'JetBrains secours', monospace;
    padding:5px 10px;
    background:var(--accent-soft);
    color:var(--ink-soft);
    border-radius:2px;
  }
@media (max-width:760px){
    .soins-grid{ grid-template-columns:1fr; }
  }
/* ===== SIGNATURE / PILLARS ===== */
  .pillars{ background:var(--ink); color:var(--bone); }
.pillars .eyebrow{ color:var(--accent-2); }
.pillars .eyebrow::before{ background:var(--accent-2); }
.pillars .section-head h2{ color:var(--bone); }
.pillars .section-head p{ color:#A9B3A6; }
.pillar-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:rgba(255,255,255,0.12);
  }
.pillar{
    background:var(--ink);
    padding:36px 32px;
  }
.pillar .glyph{
    /* etait un caractere (✦ ◎ ＋) en Fraunces italique jusqu'au 2026-09-10 :
       trois signes venus de familles differentes, remplaces par des icones
       SVG. Deux familles cohabitent aujourd'hui, et c'est mesure : celles de
       index.html sont des contours a 1,75 px a l'ecran, celles de
       a-propos.html (dessinees par Nicolas le 2026-09-11) sont des formes
       pleines a 3,6 px. Les trois d'une meme section sont accordees entre
       elles ; les deux sections ne le sont pas encore l'une avec l'autre. */
    width:30px;
    height:30px;
    color:var(--clay);
    margin-bottom:18px;
    display:block;
  }
.pillar h3{
    color:var(--bone);
    font-size:19px;
    margin-bottom:10px;
  }
.pillar p{
    color:#A9B3A6;
    font-size:14px;
  }
@media (max-width:760px){
    .pillar-grid{ grid-template-columns:1fr; }
  }
/* ===== TARIFS ===== */
  .tarifs-note{
    font-size:13.5px;
    color:var(--muted);
    max-width:640px;
    margin-bottom:48px;
    padding:16px 20px;
    border-left:2px solid var(--clay);
    background:var(--clay-soft);
  }
.tarif-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
  }
.tarif-kicker{
    font-family:'JetBrains Mono', 'JetBrains secours', monospace;
    font-size:10.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--clay);
    margin-bottom:10px;
  }
.tarif-card h3{ font-size:20px; margin-bottom:10px; }
.tarif-card .tags{
    font-size:12px;
    color:var(--muted);
    margin-bottom:18px;
    line-height:1.6;
  }
.tarif-price{
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid var(--line);
  }
.tarif-price strong{
    font-family:'Fraunces', 'Fraunces secours', serif;
    font-size:27px;
    font-weight:500;
  }
.tarif-price .per{ font-size:12.5px; color:var(--muted); }
.tarif-price .forfait{
    margin-top:8px;
    font-size:12px;
    color:var(--ink-soft);
    font-family:'JetBrains Mono', 'JetBrains secours', monospace;
  }
@media (max-width:980px){ .tarif-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tarif-grid{ grid-template-columns:1fr; } }
/* ===== METHODE ===== */
  .methode{ background:var(--white); }
.methode-track{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    position:relative;
  }
.methode-track::before{
    content:"";
    position:absolute;
    top:30px; left:0; right:0;
    height:1px;
    background:var(--line);
  }
.methode-step{
    padding:0 24px 0 0;
    position:relative;
  }
.methode-num{
    width:60px; height:60px;
    border-radius:50%;
    background:var(--bone);
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', 'JetBrains secours', monospace;
    font-size:14px;
    color:var(--accent);
    position:relative;
    z-index:2;
    margin-bottom:22px;
  }
.methode-step h3{ font-size:19px; margin-bottom:10px; }
.methode-step p{ font-size:14px; color:var(--muted); }
@media (max-width:860px){
    .methode-track{ grid-template-columns:1fr; gap:36px; }
    .methode-track::before{ display:none; }
  }
/* ===== CONTACT ===== */
  .contact{ background:var(--bone-2); }
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
  }
/* Les deux boutons de la section contact. Sans conteneur, ils n'etaient
   separes que par l'espace entre deux balises inline, soit 4 px : ils se
   touchaient presque. */
.contact-actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin:8px 0 20px;
  }
.contact-info p{ color:var(--ink-soft); font-size:15px; margin-bottom:30px; max-width:420px; }
.contact-list li{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 0;
    border-top:1px solid var(--line);
    font-size:14.5px;
  }
.contact-list li:last-child{ border-bottom:1px solid var(--line); }
.contact-list svg{ width:16px; height:16px; color:var(--accent); flex-shrink:0; }
/* L'adresse e-mail et le compte Instagram de la section Contact étaient des
   liens SANS aucun signe distinctif : la règle a{color:inherit;
   text-decoration:none} du socle les rendait identiques à la ligne "Lyon"
   juste au-dessus, qui n'est pas cliquable. Signalé par Nicolas le
   2026-09-12 (« rajouter un surlignage au survol pour bien montrer que c'est
   cliquable »).
   Le repos reçoit lui aussi un signe, pas seulement le survol : sur un
   téléphone il n'y a pas de survol, et c'est la moitié des visites. */
.contact-list a{
    color:var(--accent-lisible);
    padding:2px 5px;
    margin:0 -5px;
    box-shadow:inset 0 -1px 0 var(--accent-2);
    transition:background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
  }
.contact-list a:hover,
  .contact-list a:focus-visible{
    background:var(--accent-soft);
    color:var(--ink);
    box-shadow:inset 0 -1px 0 var(--accent);
  }
form{ display:flex; flex-direction:column; gap:16px; }
.field label{
    display:block;
    font-size:12px;
    font-family:'JetBrains Mono', 'JetBrains secours', monospace;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:7px;
  }
.field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--accent);
    outline:none;
  }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px){
    .contact-grid{ grid-template-columns:1fr; }
    .row2{ grid-template-columns:1fr; }
  }
/* ===== FOOTER ===== */
footer{
  background:var(--ink);
  color:#A9B3A6;
  padding:44px 0 36px;
  font-size:12.5px;
}
.footer-wrap{
  display:grid;
  grid-template-columns:1.2fr auto;
  gap:22px 46px;
  align-items:start;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#C7CFC2;
}
.footer-brand strong{
  font-family:'Fraunces', 'Fraunces secours', serif;
  font-size:22px;
  font-weight:500;
  color:var(--bone);
  letter-spacing:-0.01em;
}
footer a{ color:#C7CFC2; border-bottom:1px solid transparent; transition:border-color .25s ease, color .25s ease; }
footer a:hover{ color:var(--bone); border-color:#C7CFC2; }
.footer-links{ display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-end; }
.footer-primary{ font-weight:500; }
.footer-legal{
  grid-column:1 / -1;
  justify-content:flex-start;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,0.12);
  color:#8C9588;
}
.footer-copy{
  grid-column:1 / -1;
  color:#8C9588;
}
@media (max-width:720px){
  .footer-wrap{ grid-template-columns:1fr; }
  .footer-links{ justify-content:flex-start; gap:14px 18px; }
}
@media (max-width:600px){
  section{ padding:72px 0; }
  .wrap{ padding:0 22px; }
}