/* ==========================================================================
   Cours de piano — Michel Boissac — variante « pochette de disque »
   Parti pris : noir chaud, laiton, typographie massive, mise en page
   asymétrique (le texte à gauche sur une colonne de lecture étroite, les
   repères et encarts à droite), comme une pochette de jazz des années 60.

   1. Jetons   2. Base   3. Menu   4. Hero   5. En-têtes de section
   6. Accueil  7. Vidéo  8. Méthode  9. Témoignage  10. Tarifs
   11. Contact 12. Pied  13. Animations  14. Petits écrans
   ========================================================================== */

/* 1. Jetons --------------------------------------------------------------- */

:root{
  color-scheme: dark; /* le site assume un seul habillage, nocturne */

  /* Couleur */
  --nuit:#0a0908;          /* noir chaud, jamais #000 pur */
  --nuit-creuse:#141110;   /* fonds de blocs */
  --ivoire:#efe9dd;        /* texte principal */
  --ivoire-sourd:#a79d8c;  /* texte secondaire, chaud et non gris */
  --laiton:#c89b3c;        /* l'unique accent : cuivre d'instrument */
  --laiton-sombre:#8a6a24;
  --trait:rgba(239,233,221,.13);

  /* Typographie */
  --titre:"Archivo Black", "Arial Black", Impact, sans-serif;
  --texte:"Newsreader", Georgia, "Times New Roman", serif;
  --util:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Mesures */
  --large:68rem;        /* largeur maximale de la page */
  --lecture:36rem;      /* colonne de lecture, ~65 signes */
  --marge:max(1.25rem, env(safe-area-inset-left, 0px));
  --marge-d:max(1.25rem, env(safe-area-inset-right, 0px));
  --touche:44px;
}

/* 2. Base ----------------------------------------------------------------- */

*{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--nuit);
  color:var(--ivoire);
  font-family:var(--texte);
  font-size:clamp(1.02rem, .98rem + .35vw, 1.15rem);
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block }

::selection{ background:var(--laiton); color:var(--nuit) }

:focus-visible{ outline:2px solid var(--laiton); outline-offset:3px }

a{ color:var(--laiton) }

/* Une bande occupe toute la largeur ; sa grille intérieure tient la gouttière. */
.bande{ width:100% }

.grille{
  width:100%;
  max-width:var(--large);
  margin:0 auto;
  padding-left:var(--marge);
  padding-right:var(--marge-d);
}

.lecture{ max-width:var(--lecture) }

.etiquette{
  font-family:var(--util);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--laiton);
}

/* 3. Menu ----------------------------------------------------------------- */

.menu{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(10,9,8,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trait);
}

.menu .grille{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:.55rem;
}

.menu .signature{
  font-family:var(--util);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ivoire-sourd);
  white-space:nowrap;
}

.menu ul{
  display:flex;
  gap:.15rem;
  list-style:none;
  margin:0;
  padding:0;
}

.menu ul a{
  display:flex;
  align-items:center;
  min-height:var(--touche);
  padding:0 .85rem;
  font-family:var(--util);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ivoire);
  text-decoration:none;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s ease, border-color .2s ease;
}
.menu ul a:hover{ color:var(--laiton) }
.menu ul a[aria-current="true"]{ color:var(--laiton); border-bottom-color:var(--laiton) }

/* 4. Hero ----------------------------------------------------------------- */

.hero{
  border-bottom:1px solid var(--trait);
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(200,155,60,.10), transparent 70%),
    var(--nuit);
}

.hero .grille{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  padding-block:clamp(2.5rem,7vw,5rem);
}

.hero h1{
  font-family:var(--titre);
  font-weight:400;
  font-size:clamp(2.3rem, 1.1rem + 5.6vw, 4.6rem);
  line-height:.96;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:.9rem 0 0;
  text-wrap:balance;
}
.hero h1 em{
  display:block;
  font-style:normal;
  color:var(--laiton);
}

.hero .chapeau{
  max-width:30rem;
  margin:1.4rem 0 0;
  font-size:1.12em;
  color:var(--ivoire-sourd);
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:2rem;
}

.bouton{
  display:inline-flex;
  align-items:center;
  min-height:var(--touche);
  padding:.7rem 1.4rem;
  font-family:var(--util);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--laiton);
  -webkit-tap-highlight-color:transparent;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.bouton.plein{ background:var(--laiton); color:var(--nuit) }
.bouton.plein:hover{ background:var(--ivoire); border-color:var(--ivoire) }
.bouton.vide{ color:var(--ivoire); border-color:var(--trait) }
.bouton.vide:hover{ border-color:var(--laiton); color:var(--laiton) }

.hero figure{ margin:0 }

/* Portrait en ovale plein, dans l'esprit de la version 2. Le format 4/5 donne
   une ellipse haute : le profil tient dans le ventre de l'ovale, les mains
   restent visibles même si les angles du cliché sont mangés. */
.hero .portrait{
  width:100%;
  aspect-ratio:4/5;
  border-radius:50%;
  object-fit:cover;
  object-position:center 38%;
  filter:grayscale(.18) contrast(1.06);
  /* Le filet laiton suit la courbe et reste à distance : un outline décalé
     épouse le border-radius, sans élément ni calque supplémentaire. */
  outline:1px solid var(--laiton-sombre);
  outline-offset:.7rem;
}

.hero figcaption{
  margin-top:1.7rem;   /* laisse respirer le filet qui déborde sous la photo */
  font-family:var(--texte);
  font-style:italic;
  font-size:.95rem;
  line-height:1.45;
  color:var(--ivoire-sourd);
}
.hero figcaption span{
  display:block;
  margin-top:.35rem;
  font-family:var(--util);
  font-style:normal;
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--laiton-sombre);
}

/* 5. En-têtes de section --------------------------------------------------- */

.section{ border-bottom:1px solid var(--trait) }
.section > .grille{ padding-block:clamp(3rem,8vw,5.5rem) }

.tete{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-bottom:clamp(1.8rem,4vw,2.8rem);
  padding-bottom:1rem;
  border-bottom:1px solid var(--trait);
}

.tete h2{
  font-family:var(--titre);
  font-weight:400;
  font-size:clamp(1.6rem, .9rem + 3vw, 2.7rem);
  line-height:1;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0;
}

/* 6. Accueil --------------------------------------------------------------- */

/* Les deux colonnes sont étirées à la même hauteur : la colonne de texte,
   bien plus courte, peut alors pousser sa photo tout en bas, à la hauteur
   exacte où s'arrête l'encadré « Parcours » de la colonne de droite. */
.deux-colonnes{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,18rem);
  gap:clamp(1.8rem,5vw,4rem);
  align-items:stretch;
}
.deux-colonnes > div:first-child{
  display:flex;
  flex-direction:column;
}

.deux-colonnes p{ margin:0 0 1.2rem }
.deux-colonnes p:last-child{ margin-bottom:0 }

.exergue{
  font-size:1.35em;
  line-height:1.4;
  color:var(--ivoire);
}

.repere{
  border-top:2px solid var(--laiton);
  padding-top:1rem;
  margin-bottom:1.8rem;
}
.repere:last-child{ margin-bottom:0 }
/* Les intitulés vont de « 5 ans d'expérience » à « Chez vous » : la taille
   s'adapte pour que les plus longs tiennent sur deux lignes sans se briser. */
.repere dt{
  font-family:var(--titre);
  font-size:clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
  line-height:1.08;
  text-transform:uppercase;
  color:var(--ivoire);
  font-variant-numeric:tabular-nums;
  text-wrap:balance;
}
.repere dd{
  margin:.4rem 0 0;
  font-family:var(--util);
  font-size:.78rem;
  letter-spacing:.08em;
  line-height:1.5;
  color:var(--ivoire-sourd);
}

.encart{
  border:1px solid var(--trait);
  background:var(--nuit-creuse);
  padding:1.4rem;
}
.encart h3{
  font-family:var(--util);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--laiton);
  margin:0 0 .7rem;
}
.encart p{
  margin:0 0 .9rem;
  font-size:.95rem;
  line-height:1.6;
  color:var(--ivoire-sourd);
}
.encart p:last-child{ margin-bottom:0 }

/* La photo des mains ferme la colonne de texte, calée à gauche et en bas.
   Elle n'a pas de taille fixe : elle prend ce qui reste sous le dernier
   paragraphe, donc son bas tombe toujours sur celui de l'encadré voisin,
   quelle que soit la largeur de l'écran. */
.photo-colonne{
  margin:2.2rem 0 0;
  flex:1 1 0;
  min-height:9rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
}
.photo-colonne img{
  flex:1 1 0;
  min-height:0;
  width:auto;
  aspect-ratio:4/5;
  border-radius:50%;
  object-fit:cover;
  object-position:center 45%;
  filter:grayscale(.15) contrast(1.05);
  outline:1px solid var(--trait);
  outline-offset:.5rem;
}
.photo-colonne figcaption{
  margin-top:.6rem;
  font-family:var(--util);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--laiton-sombre);
}

/* 7. Vidéo ----------------------------------------------------------------- */

.ecoute{ background:var(--nuit-creuse) }

.ecoute .grille{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,15rem);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
  padding-block:clamp(2.5rem,6vw,4rem);
}

.video-cadre{
  position:relative;
  aspect-ratio:16/9;
  max-width:100%;
  border:1px solid var(--trait);
  background:#000;
  overflow:hidden;
}
.video-cadre iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

.ecoute h2{
  font-family:var(--titre);
  font-weight:400;
  font-size:clamp(1.5rem,1rem + 2.2vw,2.2rem);
  line-height:1.02;
  text-transform:uppercase;
  margin:.6rem 0 .8rem;
}
.ecoute p{
  margin:0 0 1.2rem;
  font-size:.98rem;
  color:var(--ivoire-sourd);
}
.ecoute a.lien{
  font-family:var(--util);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--laiton);
  text-decoration:none;
  border-bottom:1px solid var(--laiton-sombre);
}
.ecoute a.lien:hover{ color:var(--ivoire); border-color:var(--ivoire) }

/* La photo de concert, sous le lien : fond noir, lumière chaude, elle prolonge
   la vidéo sans lui disputer la vedette. */
.photo-scene{
  margin:1.6rem 0 0;
}
.photo-scene img{
  width:100%;
  aspect-ratio:1/1;      /* carré : l'ovale y devient un cercle, plus net ici */
  border-radius:50%;
  object-fit:cover;
  object-position:center 45%;
  outline:1px solid var(--trait);
  outline-offset:.5rem;
}
.photo-scene figcaption{
  margin-top:.6rem;
  font-family:var(--util);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--laiton-sombre);
}

/* 7 bis. Bande photo pleine largeur ---------------------------------------- */

/* Une respiration entre la face A et la face B : la photo occupe toute la
   largeur, la légende reste alignée sur la grille du reste de la page. */
/* Une photo panoramique ne peut pas devenir un ovale sans devenir ridicule :
   ici l'arrondi passe par les angles, et la bande quitte le bord à bord pour
   devenir une carte posée dans la grille. */
.photo-bande{
  border-bottom:1px solid var(--trait);
  padding-block:clamp(2rem,5vw,3.5rem);
}
.photo-bande figure{
  position:relative;
  margin:0 auto;
  width:min(var(--large), calc(100% - 2.5rem));
  border-radius:clamp(1.4rem,4vw,2.6rem);
  overflow:hidden;
}
.photo-bande img{
  width:100%;
  height:clamp(12rem, 26vw, 22rem);
  object-fit:cover;
  object-position:center 46%;
  filter:grayscale(.2) contrast(1.05) brightness(.9);
}
.photo-bande figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding-block:1.8rem 1.3rem;
  background:linear-gradient(transparent, rgba(10,9,8,.85) 55%);
}
/* La légende s'écarte du bord pour ne pas buter dans l'angle arrondi. */
.photo-bande figcaption .grille{
  padding-left:max(var(--marge), 2rem);
  padding-right:max(var(--marge-d), 2rem);
}
.photo-bande figcaption p{
  max-width:var(--lecture);
  margin:.3rem 0 0;
  font-size:clamp(1rem, .9rem + .6vw, 1.3rem);
  line-height:1.3;
  color:var(--ivoire);
  text-wrap:balance;
}

/* 8. Méthode (questions / réponses) ---------------------------------------- */

.methode{
  display:grid;
  gap:clamp(1.6rem,4vw,2.4rem);
}

.pas{
  display:grid;
  grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:clamp(.6rem,3vw,2.5rem);
  align-items:start;
  padding-top:1.4rem;
  border-top:1px solid var(--trait);
}
.pas:first-child{ border-top:0; padding-top:0 }

.pas h3{
  font-family:var(--titre);
  font-weight:400;
  font-size:1.05rem;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--laiton);
  margin:0;
}

.pas p{ margin:0; max-width:var(--lecture) }
.pas p + p{ margin-top:.9rem }

.pas strong{
  font-weight:400;
  color:var(--ivoire);
  background:linear-gradient(transparent 62%, rgba(200,155,60,.28) 62%);
}

/* 9. Témoignage ------------------------------------------------------------ */

.temoignage{ background:var(--nuit-creuse) }
.temoignage .grille{ padding-block:clamp(3rem,8vw,5rem) }

.temoignage blockquote{
  max-width:44rem;
  margin:0;
  font-size:clamp(1.25rem,1rem + 1.3vw,1.75rem);
  line-height:1.4;
  text-wrap:pretty;
}
.temoignage blockquote::before{
  content:"“";
  display:block;
  font-family:var(--titre);
  font-size:3.5rem;
  line-height:.6;
  color:var(--laiton);
  margin-bottom:1rem;
}
.temoignage figcaption{
  margin-top:1.4rem;
  font-family:var(--util);
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ivoire-sourd);
}

/* 10. Tarifs --------------------------------------------------------------- */

.tarifs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:1rem;
  max-width:46rem;
}

.tarif{
  border:1px solid var(--trait);
  padding:1.8rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.tarif.vedette{ border-color:var(--laiton); background:var(--nuit-creuse) }

.tarif .prix{
  font-family:var(--titre);
  font-size:clamp(2.6rem,2rem + 2vw,3.4rem);
  line-height:.95;
  font-variant-numeric:tabular-nums;
}
.tarif.vedette .prix{ color:var(--laiton) }

.tarif .quoi{
  font-family:var(--util);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ivoire);
}
.tarif .detail{
  font-size:.95rem;
  line-height:1.5;
  color:var(--ivoire-sourd);
  margin:0;
}

.precisions{
  margin:2rem 0 0;
  max-width:var(--lecture);
  font-size:.95rem;
  color:var(--ivoire-sourd);
}

/* 11. Contact -------------------------------------------------------------- */

.contact .grille{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,20rem);
  gap:clamp(1.8rem,5vw,4rem);
  align-items:start;
}

.champ{ margin-bottom:1.1rem }

label{
  display:block;
  margin-bottom:.4rem;
  font-family:var(--util);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ivoire-sourd);
}

input, textarea{
  width:100%;
  min-height:var(--touche);
  padding:.8rem .9rem;
  background:var(--nuit-creuse);
  border:1px solid var(--trait);
  border-radius:0;
  color:var(--ivoire);
  font-family:var(--util);
  font-size:16px; /* en dessous, iOS zoome à la saisie */
  line-height:1.5;
  transition:border-color .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
input:focus, textarea:focus{ outline:none; border-color:var(--laiton) }
textarea{ min-height:8.5rem; resize:vertical }

.pot-de-miel{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

button{
  width:100%;
  min-height:var(--touche);
  padding:.9rem 1.5rem;
  background:var(--laiton);
  border:1px solid var(--laiton);
  border-radius:0;
  color:var(--nuit);
  font-family:var(--util);
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .22s ease, color .22s ease;
}
button:hover:not(:disabled){ background:var(--ivoire); border-color:var(--ivoire) }
button:disabled{ opacity:.55; cursor:default }

.message{
  margin-top:1rem;
  padding:.85rem 1rem;
  border:1px solid var(--trait);
  font-family:var(--util);
  font-size:.9rem;
}
.message[hidden]{ display:none }
.message.ok{ border-color:var(--laiton) }
.message.erreur{ border-color:#9c5248; color:#e8b5ab }
.message a{
  display:inline-block;
  min-height:var(--touche);
  padding-top:.4rem;
  color:var(--laiton);
  text-underline-offset:3px;
}

.fiche{
  border-top:2px solid var(--laiton);
  padding-top:1.1rem;
}
.fiche dt{
  font-family:var(--util);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ivoire-sourd);
  margin-top:1.2rem;
}
.fiche dt:first-of-type{ margin-top:0 }
.fiche dd{
  margin:.3rem 0 0;
  font-size:1rem;
  line-height:1.5;
  word-break:break-word;
}
.fiche dd a{ color:var(--ivoire); text-decoration:none; border-bottom:1px solid var(--laiton-sombre) }
.fiche dd a:hover{ color:var(--laiton) }

/* 12. Pied ----------------------------------------------------------------- */

.pied .grille{ padding-block:clamp(2.5rem,6vw,4rem) }

.pied h2{
  font-family:var(--util);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--laiton);
  margin:0 0 1rem;
}

.pied .noms{
  max-width:52rem;
  margin:0;
  font-size:1rem;
  line-height:1.9;
  color:var(--ivoire-sourd);
}

.pied .bas{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  justify-content:space-between;
  align-items:center;
  margin-top:2.5rem;
  padding-top:1.2rem;
  border-top:1px solid var(--trait);
  font-family:var(--util);
  font-size:.74rem;
  letter-spacing:.1em;
  color:var(--ivoire-sourd);
}
.pied .bas a{ color:var(--ivoire-sourd); text-decoration:none }
.pied .bas a:hover{ color:var(--laiton) }

/* 13. Animations ----------------------------------------------------------- */

/* Rien n'est caché au repos : la page est entière dès le chargement, le fondu
   ne fait qu'adoucir l'arrivée des blocs situés plus bas. */
.fondu{ transition:opacity .7s ease, transform .7s ease }
html:not(.sans-js) .fondu:not(.visible){ opacity:.001; transform:translateY(14px) }

@media (prefers-reduced-motion: reduce){
  .fondu{ transition:none }
  html:not(.sans-js) .fondu:not(.visible){ opacity:1; transform:none }
}

/* 14. Petits écrans -------------------------------------------------------- */

@media (max-width: 62rem){
  .hero .grille{ grid-template-columns:1fr; gap:2rem }
  .hero figure{ order:-1; max-width:15rem }
  .deux-colonnes,
  .ecoute .grille,
  .contact .grille{ grid-template-columns:1fr }
  .pas{ grid-template-columns:1fr; gap:.5rem }
  .reperes{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(9rem,1fr));
    gap:1.2rem;
  }
  .repere{ margin-bottom:0 }
  /* Sur une seule colonne, plus rien à aligner : la photo reprend une taille
     normale, bornée pour ne pas pousser le texte trop bas. */
  .photo-colonne{ flex:none; min-height:0; max-width:17rem }
  .photo-colonne img{ flex:none; width:100%; height:auto }
  .photo-scene{ max-width:28rem }
}

/* Cinq entrées ne tiennent plus côte à côte sur un téléphone : la barre défile
   latéralement, d'un seul doigt, plutôt que de passer sur deux lignes. */
@media (max-width: 52rem){
  .menu .signature{ display:none }
  .menu .grille{ padding-left:0; padding-right:0 }
  .menu ul{
    width:100%;
    gap:0;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-left:var(--marge);
    padding-right:var(--marge-d);
  }
  .menu ul::-webkit-scrollbar{ display:none }
  .menu ul li{ flex:none; scroll-snap-align:start }
  .menu ul a{ padding:0 .6rem; font-size:.72rem; letter-spacing:.07em }
}

@media (max-width: 26rem){
  .menu ul a{ font-size:.68rem; padding:0 .45rem }
  .actions .bouton{ width:100% ; justify-content:center }
}

@media print{
  body{ background:#fff; color:#000 }
  .menu, .ecoute, form{ display:none }
  .fondu{ opacity:1 !important; transform:none !important }
}

/* Secours si le formulaire échoue --------------------------------------- */
.note-secours{
  margin:.9rem 0 0;
  font-size:.78rem;
  line-height:1.55;
  color:var(--ivoire-sourd);
}
.note-secours a{
  color:var(--laiton);
  overflow-wrap:anywhere;
  text-underline-offset:3px;
}