/* ==========================================================================
   COTTAWAY - Feuille de style
   --------------------------------------------------------------------------
   Organisation du fichier :
     1. Polices           (@font-face, fichiers locaux)
     2. Jetons de design  (couleurs, typo, espacements : tout se regle ici)
     3. Remise a zero     (comportements par defaut du navigateur)
     4. Base              (body, titres, liens)
     5. Briques           (bouton, carte, pastille, soulignement, grain)
     6. Sections          (ajoutees au fur et a mesure)
     7. Responsive        (adaptations mobile / tablette)

   Pour changer une couleur ou une taille : allez en section 2. Ne modifiez
   pas les valeurs ailleurs dans le fichier, elles pointent toutes vers la
   section 2.
   ========================================================================== */


/* ==========================================================================
   1. POLICES
   Fichiers locaux (assets/fonts/), pas de chargement depuis Google.
   Raison : le site fonctionne hors ligne, et aucune donnee visiteur n'est
   envoyee a un serveur tiers (point RGPD).
   Les deux familles sont des polices VARIABLES : un seul fichier couvre
   toutes les graisses, d'ou "font-weight: 100 1000".
   Licence SIL Open Font License, voir assets/fonts/OFL-*.txt
   ========================================================================== */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/lora-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/lora-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. JETONS DE DESIGN
   Toutes les valeurs releves sur le site de reference sont ici.
   ========================================================================== */

:root {

  /* --- Familles de polices --- */
  --police-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --police-serif: 'Lora', Georgia, 'Times New Roman', serif;

  /* --- Couleurs : texte --- */
  --texte: #333333;          /* corps de texte et titres. Contraste 11,57:1 */

  /* La reference utilise #98A2B3 pour son texte secondaire. Ce gris ne passe
     qu'a 2,58:1 sur blanc, sous le minimum de 4,5:1 : il est trop pale pour
     etre lu confortablement. On prend le cran au-dessus dans le meme systeme
     de design, qui passe a 4,97:1 sur blanc et 4,56:1 sur creme. */
  --texte-doux: #667085;     /* texte secondaire, legendes */
  --gris-decor: #98A2B3;     /* decoratif uniquement, jamais du texte a lire */

  --encre: #101828;          /* presque noir : bouton flottant, footer */

  /* --- Couleurs : fonds --- */
  --blanc: #FFFFFF;          /* fond de page et cartes */
  --creme: #F9F4F1;          /* fond des grands blocs */
  --creme-fonce: #EBDFD8;    /* bordures et separateurs sur creme */

  /* --- Couleurs : accent --- */
  --violet: #6956F9;         /* boutons d'action */
  --violet-sombre: #5344D4;  /* survol des boutons */
  --violet-2: #7F56D9;       /* accent secondaire, mots colores */
  --corail: #F4695B;         /* premier mot du sur-titre */
  --jaune: #F2D544;          /* soulignement dessine a la main */

  /* --- Couleurs : pastilles derriere les icones --- */
  --pastel-rose: #F8CCCC;
  --pastel-bleu: #C4D9F4;
  --pastel-vert: #C9F5E3;
  --pastel-jaune: #F6ECC0;

  /* --- Echelle typographique --- */
  /* clamp(mini, fluide, maxi) : la taille s'adapte a la largeur de l'ecran
     sans avoir besoin d'une media query. */
  --t-h1: clamp(2.125rem, 1.05rem + 3.7vw, 3.5rem);      /* 34px -> 56px */
  --t-h2: clamp(1.75rem, 0.9rem + 2.9vw, 3.125rem);      /* 28px -> 50px, valeur relevee */
  --t-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);        /* 20px -> 24px */
  --t-corps: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);   /* 16px -> 17px */
  --t-grand: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem); /* 17px -> 19px */
  --t-petit: 0.875rem;                                    /* 14px */

  --ls-titre: -0.035em;      /* interlettrage serre des grands titres (-2px a 56px) */
  --lh-titre: 1.1;
  --lh-corps: 1.6;

  /* --- Espacements --- */
  --esp-3xs: 0.25rem;
  --esp-2xs: 0.5rem;
  --esp-xs: 0.75rem;
  --esp-s: 1rem;
  --esp-m: 1.5rem;
  --esp-l: 2rem;
  --esp-xl: 3rem;
  --esp-2xl: 4rem;
  --esp-3xl: 6rem;
  --esp-section: clamp(4rem, 8vw, 7.5rem);   /* respiration verticale entre blocs */

  /* --- Rayons d'arrondi --- */
  --r-bloc: 32px;            /* grands blocs creme */
  --r-carte: 24px;           /* cartes */
  --r-petit: 12px;           /* petits elements */
  --r-pilule: 999px;         /* boutons */

  /* --- Ombres --- */
  --ombre-carte: 0 1px 2px rgba(16, 24, 40, 0.04),
                 0 8px 24px rgba(16, 24, 40, 0.05);
  --ombre-carte-survol: 0 2px 4px rgba(16, 24, 40, 0.05),
                        0 16px 40px rgba(16, 24, 40, 0.09);
  --ombre-bouton: 0 1px 2px rgba(16, 24, 40, 0.06),
                  0 6px 16px rgba(105, 86, 249, 0.24);
  --ombre-flottant: 0 4px 16px rgba(16, 24, 40, 0.18);

  /* --- Largeurs --- */
  --largeur-panneau: 1288px; /* grands blocs creme. Valeur relevee sur la reference */
  --largeur-page: 1200px;    /* conteneur principal */
  --largeur-texte: 42rem;    /* colonne de lecture confortable */

  /* --- Transitions --- */
  --tr-rapide: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-normale: 260ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-lente: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Texture grain ---
     Bruit genere par un filtre SVG encode directement dans le CSS.
     Aucune image a charger : zero requete reseau supplementaire. */
  /* Reglage cale par mesure, pas a l'estime. Sur 8 variantes testees, celle-ci
     reproduit le grain de la reference a 0,03 pres. Voir le journal de calage
     dans outils/README.md.
       feTurbulence  : genere le bruit
       feColorMatrix : transforme ce bruit en NOIR dont l'opacite suit le bruit
       feFuncA gamma : exposant 1.6 = rarete des grains, amplitude 0.13 = force
     Ne modifiez ces trois valeurs qu'en remesurant derriere. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='1.6' amplitude='0.13'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   3. REMISE A ZERO
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compense la hauteur du header collant quand on saute a une ancre */
  scroll-padding-top: 6rem;
}

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

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* Respecte le reglage systeme "reduire les animations" */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   4. BASE
   ========================================================================== */

body {
  font-family: var(--police-sans);
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  color: var(--texte);
  background-color: var(--blanc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Garde-fou : empeche tout debordement horizontal accidentel */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--police-sans);
  font-weight: 400;
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  color: var(--texte);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 {
  font-size: var(--t-h2);
  /* La reference respire un peu plus sur les titres de section que sur le H1 :
     interligne 60 px pour 50 px de corps. */
  line-height: 1.2;
}
h3 {
  font-size: var(--t-h3);
  font-family: var(--police-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Contour de focus visible au clavier uniquement, jamais a la souris.
   Necessaire pour la navigation au clavier et les lecteurs d'ecran. */
:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: var(--r-3xs, 4px);
}


/* ==========================================================================
   5. BRIQUES REUTILISABLES
   ========================================================================== */

/* --- Conteneur : centre le contenu et pose les marges laterales --- */
.contenu {
  width: 100%;
  max-width: var(--largeur-page);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* --- Emphase serif italique dans un titre ---
   La signature typographique du design : la fin du titre bascule
   en Lora italique gras. */
.serif {
  font-family: var(--police-serif);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* --- Soulignement jaune dessine a la main ---
   Le trait est un SVG place en fond, sous le mot. */
.souligne {
  position: relative;
  display: inline-block;
}
/* Trois traits superposes, comme un coup de feutre repasse deux fois.
   Epaisseurs calees sur la reference, dont le trait est nettement plus gras
   qu'un simple soulignement. */
.souligne::after {
  content: '';
  position: absolute;
  /* Le trait ne court PAS sous tout le mot : chez la reference c'est un
     gribouillis court, sous la partie centrale. Ces valeurs donnent aussi une
     boite dont les proportions sont proches de celles du viewBox (200 x 30),
     ce qui evite que les trois traits s'ecrasent l'un sur l'autre. */
  left: 20%;
  right: 20%;
  bottom: -0.52em;
  height: 0.74em;
  /* Trois traits qui RACCOURCISSENT en descendant, comme un feutre repasse
     deux fois de plus en plus court. C'est ce biseau qui donne l'aspect
     dessine a la main plutot qu'un triple soulignement regulier. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 36' preserveAspectRatio='none'%3E%3Cg stroke='%23F2D544' stroke-linecap='round' fill='none'%3E%3Cpath d='M5 12c42-9 92-11 137-6 20 2 40 5 56 9' stroke-width='7.5'/%3E%3Cpath d='M26 24c34-7 76-9 116-5 17 2 33 4 47 8' stroke-width='6.5' opacity='.95'/%3E%3Cpath d='M58 33c26-5 57-6 87-3 12 1 24 3 34 5' stroke-width='4.5' opacity='.75'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* --- Fond creme texture ---
   Le grain est pose en pseudo-element pour ne pas teinter le contenu.
   Cibles mesurees sur le site de reference : luminosite moyenne 240,60 / 255
   et grain (ecart-type) 3,88. Resultat obtenu : 239,75 et 3,91. */
.creme {
  position: relative;
  background-color: var(--creme);
  isolation: isolate;
}
.creme::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Sans cette ligne, le grain deborde en carre hors des coins arrondis. */
  border-radius: inherit;
  background-image: var(--grain);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

/* --- Bouton principal : pilule violette avec fleche --- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2xs);
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: var(--r-pilule);
  background-color: var(--violet);
  color: var(--blanc);
  font-size: var(--t-corps);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: var(--ombre-bouton);
  transition: background-color var(--tr-rapide),
              transform var(--tr-rapide),
              box-shadow var(--tr-rapide);
}
.bouton:hover {
  background-color: var(--violet-sombre);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.08),
              0 10px 24px rgba(105, 86, 249, 0.32);
}
.bouton:active {
  transform: translateY(0);
}

/* La fleche glisse vers la droite au survol */
.bouton__fleche {
  width: 1.125em;
  height: 1.125em;
  flex: none;
  transition: transform var(--tr-normale);
}
.bouton:hover .bouton__fleche {
  transform: translateX(3px);
}

/* --- Bouton secondaire : contour, sans remplissage --- */
.bouton--fantome {
  background-color: transparent;
  color: var(--texte);
  box-shadow: inset 0 0 0 1.5px var(--creme-fonce);
}
.bouton--fantome:hover {
  background-color: var(--blanc);
  color: var(--texte);
  box-shadow: inset 0 0 0 1.5px var(--texte-doux),
              0 6px 16px rgba(16, 24, 40, 0.08);
}

/* --- Bouton grande taille, pour les CTA de section --- */
.bouton--grand {
  padding: 1.0625rem 2rem;
  font-size: var(--t-grand);
}

/* --- Carte blanche arrondie ---
   Sans ombre au repos : mesure faite sur la reference, ses cartes sont plates.
   Le blanc sur le fond creme suffit a les detacher. L'ombre n'apparait qu'au
   survol, pour signaler que la carte reagit. */
.carte {
  background-color: var(--blanc);
  border-radius: var(--r-carte);
  padding: 24px;
  transition: transform var(--tr-normale), box-shadow var(--tr-normale);
}
.carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-carte-survol);
}

/* --- Pastille pastel organique derriere une icone ---
   La forme irreguliere vient de border-radius a 4 valeurs differentes. */
.pastille {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 58% 42% 47% 53% / 45% 55% 45% 55%;
  background-color: var(--pastel-jaune);
  flex: none;
}
.pastille--rose  { background-color: var(--pastel-rose); }
.pastille--bleu  { background-color: var(--pastel-bleu); }
.pastille--vert  { background-color: var(--pastel-vert); }
.pastille--jaune { background-color: var(--pastel-jaune); }

.pastille svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--texte);
}

/* --- Sur-titre : petite ligne coloree au-dessus d'un grand titre --- */
.surtitre {
  font-size: var(--t-grand);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--esp-s);
}
.surtitre span:nth-child(1) { color: var(--corail); }
.surtitre span:nth-child(2) { color: var(--violet-2); }
.surtitre span:nth-child(3) { color: var(--texte-doux); }

/* --- Texte secondaire --- */
.doux {
  color: var(--texte-doux);
}

/* --- Colonne de lecture centree --- */
.colonne {
  max-width: var(--largeur-texte);
  margin-inline: auto;
}

/* --- Masque visuellement mais reste lu par les lecteurs d'ecran --- */
.lecteur-ecran-seulement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Apparition au defilement ---
   L'etat de depart est pose ici, la classe .visible est ajoutee par
   script.js quand l'element entre dans l'ecran.

   Noter le prefixe ".js" : l'etat masque n'est applique QUE si le marqueur
   pose dans le <head> a pu s'executer. Sans JavaScript, ou si script.js ne
   se charge pas, ces elements restent simplement visibles au lieu de rester
   invisibles pour toujours. Il y en a 23 sur la page : sans ce garde-fou,
   une panne de script rendrait la moitie du site illisible. */
.js .apparait {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--tr-lente), transform var(--tr-lente);
}
.js .apparait.visible {
  opacity: 1;
  transform: none;
}

/* --- Lien d'evitement ---
   Invisible tant qu'on ne navigue pas au clavier. Premiere tabulation sur la
   page : il apparait et permet de sauter le header. */
.evitement {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-petit) var(--r-petit);
  background: var(--violet);
  color: var(--blanc);
  font-weight: 500;
  transition: top var(--tr-rapide);
}
.evitement:focus {
  top: 0;
}


/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 HEADER COLLANT
   Transparent en haut de page, il devient blanc et se resserre des que l'on
   defile. L'etat "colle" est pose par script.js.
   -------------------------------------------------------------------------- */

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 98px;
  display: flex;
  align-items: center;
  transition: height var(--tr-normale),
              background-color var(--tr-normale),
              box-shadow var(--tr-normale);
}

.entete__interieur {
  display: flex;
  align-items: center;
  gap: var(--esp-l);
  /* Meme calcul de largeur que le bloc creme du hero, pour que le logo et le
     bouton s'alignent sur ses bords. Voir .hero pour l'explication du min(). */
  width: min(var(--largeur-panneau), calc(100% - 1.5rem));
  margin-inline: auto;
  padding-inline: 0.75rem;
}

.entete--colle {
  height: 74px;
  background-color: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.06),
              0 8px 24px rgba(16, 24, 40, 0.06);
}

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
}
.logo__marque {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 10px;
  background-color: var(--violet);
  color: var(--blanc);
  flex: none;
}
.logo__marque svg {
  width: 1.5rem;
  height: 1.5rem;
}
.logo__mot {
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--texte);
}

/* --- Navigation --- */
.entete__nav {
  display: flex;
  gap: var(--esp-m);
}
.entete__nav a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--texte);
  padding-block: 0.25rem;
}
/* Trait qui se deploie depuis le centre au survol */
.entete__nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background-color: var(--violet);
  transition: left var(--tr-normale), right var(--tr-normale);
}
.entete__nav a:hover::after {
  left: 0;
  right: 0;
}

.entete__cta {
  flex: none;
  padding: 0.9375rem 1.75rem;
}


/* --------------------------------------------------------------------------
   6.2 HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* Demarre juste sous le header, comme le grand bloc de la reference */
  margin-top: 96px;

  /* min() plutot qu'un pourcentage : le bloc fait 1288 px au maximum, et sur
     les ecrans plus etroits il garde 12 px de marge de chaque cote.
     Ne PAS utiliser d'unites vw ici : vw inclut la barre de defilement, ce qui
     decale le bloc vers la droite (constate : 129 px a gauche, 114 a droite). */
  width: min(var(--largeur-panneau), calc(100% - 1.5rem));
  margin-inline: auto;

  border-radius: var(--r-bloc);
  padding: 80px clamp(1rem, 3vw, 2.5rem) clamp(3.5rem, 6vw, 6rem);
  overflow: hidden;
}

.hero__interieur {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

.hero__titre {
  margin-bottom: var(--esp-m);
}

.hero__accroche {
  /* 42rem et non 36 : a 36rem l'accroche tombait sur 3 lignes, la reference
     en tient 2. Largeur calee pour retrouver le meme nombre de lignes. */
  max-width: 42rem;
  margin-inline: auto;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.5;
}

/* Emphase en serif italique gras a l'interieur d'un paragraphe */
.serif-gras {
  font-family: var(--police-serif);
  font-style: italic;
  font-weight: 700;
}

.hero__actions {
  margin-top: var(--esp-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.hero__rassurance {
  font-size: var(--t-petit);
  color: var(--texte-doux);
  max-width: 28rem;
}

/* --- Glyphes decoratifs flottants --- */
.glyphe {
  position: absolute;
  color: var(--texte);
  opacity: 0.85;
  pointer-events: none;
  animation: derive 7s ease-in-out infinite;
}
.glyphe svg {
  width: 100%;
  height: 100%;
}
/* Positions relevees sur la reference, exprimees en pourcentage de la largeur
   du bloc pour qu'elles suivent quand il retrecit. */
.glyphe--losange {
  width: 18px; height: 23px;
  top: 80px; left: 12.3%;
  animation-delay: -1.2s;
}
.glyphe--etoile {
  width: 19px; height: 25px;
  top: 80px; right: 11.7%;
  animation-delay: -3.4s;
}
.glyphe--croix {
  width: 28px; height: 28px;
  top: 312px; right: 16.8%;
  color: var(--gris-decor);
  animation-delay: -5.1s;
}

@keyframes derive {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(6deg); }
}


/* --------------------------------------------------------------------------
   6.3 DEMONSTRATION DU HERO
   Ce qui entre a gauche ressort traite a droite.
   -------------------------------------------------------------------------- */

.demo {
  /* 1025 px : largeur du bloc media de la reference, releve sur capture. */
  margin: clamp(2rem, 3.5vw, 3rem) auto 0;
  max-width: 1025px;
  text-align: center;
}

.demo__scene {
  display: grid;
  grid-template-columns: 1fr minmax(48px, 96px) auto minmax(48px, 96px) 1fr;
  align-items: center;
  gap: var(--esp-s);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--r-carte);
  background-color: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.demo__colonne {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  text-align: left;
}

.demo__entete {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 0.125rem;
}

/* --- Une ligne : icone + libelle --- */
.puce {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-petit);
  background-color: var(--creme);
  font-size: 0.9375rem;
  font-weight: 500;
  /* Respiration lente, decalee par --retard sur chaque ligne */
  animation: respire 3.6s ease-in-out infinite;
  animation-delay: var(--retard, 0s);
}
.puce .pastille {
  width: 1.75rem;
  height: 1.75rem;
}
.puce .pastille svg {
  width: 0.9375rem;
  height: 0.9375rem;
}
.puce__texte {
  white-space: nowrap;
}

.puce--fait {
  background-color: #F0FBF5;
  color: #1B7A4B;
}
.puce__coche {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: #C9F5E3;
  color: #14663D;
  flex: none;
}
.puce__coche svg {
  width: 0.875rem;
  height: 0.875rem;
}

@keyframes respire {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* --- Le trait pointille et sa bille qui circule --- */
.demo__liaison {
  position: relative;
  height: 2px;
  background-image: linear-gradient(90deg, var(--creme-fonce) 0 5px, transparent 5px 11px);
  background-size: 11px 2px;
}
.demo__flux {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(105, 86, 249, 0.16);
  animation: circule 2.4s linear infinite;
}
@keyframes circule {
  0%        { left: 0;    opacity: 0; }
  12%, 88%  { opacity: 1; }
  100%      { left: 100%; opacity: 0; }
}

/* --- Le noyau central --- */
.demo__noyau {
  display: grid;
  place-items: center;
  gap: 0.125rem;
  padding: 1.125rem 1.375rem;
  border-radius: var(--r-carte);
  background-color: var(--violet);
  color: var(--blanc);
  box-shadow: 0 8px 28px rgba(105, 86, 249, 0.3);
}
.demo__noyau-marque {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.16);
  margin-bottom: 0.375rem;
}
.demo__noyau-marque svg {
  width: 1.75rem;
  height: 1.75rem;
}
.demo__noyau-titre {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.demo__noyau-detail {
  font-size: 0.75rem;
  opacity: 0.82;
  white-space: nowrap;
}

.demo__legende {
  margin-top: var(--esp-s);
  font-size: var(--t-petit);
  color: var(--texte-doux);
}


/* --------------------------------------------------------------------------
   6.4 SECTIONS COURANTES
   Deux enveloppes seulement :
     .section  fond blanc, pleine largeur, contenu centre
     .panneau  grand bloc creme arrondi, meme geometrie que le hero
   -------------------------------------------------------------------------- */

/* .section et .panneau partagent EXACTEMENT la meme geometrie horizontale.
   C'est ce qui garantit que le contenu d'une section blanche s'aligne au pixel
   avec celui d'un bloc creme. Seuls le fond et l'arrondi les distinguent. */
.section,
.panneau {
  position: relative;
  width: min(var(--largeur-panneau), calc(100% - 1.5rem));
  margin-inline: auto;
  padding-block: var(--esp-section);
}

.panneau {
  border-radius: var(--r-bloc);
  overflow: hidden;
}

/* Conteneur interieur commun aux deux. */
.interieur {
  width: 100%;
  max-width: 1068px;   /* largeur du bloc de cartes de la reference */
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2rem);
}

/* Variante pour la rangee de services : la reference aligne 3 cartes de 336 px
   dans 1068. Avec 4 cartes, la meme largeur donnerait 229 px par carte, ce qui
   casse les titres en deux lignes. On elargit jusqu'au bord du panneau. */
.interieur--large {
  max-width: var(--largeur-panneau);
}

/* --- Entete de section : titre centre, puis une phrase d'introduction --- */
.section__entete {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto var(--esp-2xl);
}
/* Le soulignement jaune deborde sous la ligne de base du titre. Sans cette
   reserve, il vient toucher le paragraphe d'introduction. */
.section__entete h2 {
  padding-bottom: 0.38em;
}
.section__intro {
  margin-top: var(--esp-m);
  font-size: var(--t-grand);
  color: var(--texte-doux);
  max-width: 38rem;
  margin-inline: auto;
}

/* --- Bloc de recit : paragraphes espaces, colonne de lecture --- */
.recit {
  text-align: center;
  font-size: var(--t-grand);
}
.recit p + p {
  margin-top: var(--esp-m);
}
.recit strong {
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   6.5 CARTES DE SERVICE
   Grille en quinconce : une carte sur deux est remontee, comme la reference
   remonte sa carte centrale de 45 px.
   -------------------------------------------------------------------------- */

.cartes {
  display: grid;
  gap: 30px;   /* ecart releve sur la reference */
}

.cartes--quatre {
  /* minmax(0, 1fr) et non 1fr : sans cela, un titre long comme
     "Audit & accompagnement" elargit sa colonne et les cartes n'ont plus
     la meme largeur (constate : 223, 223, 223, 246). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* stretch et non start : toutes les cartes d'une rangee prennent la meme
     hauteur, sinon les bas sont en dents de scie. */
  align-items: stretch;
}

/* Le decalage vertical, applique seulement quand les 4 cartes tiennent sur une
   ligne. En dessous il n'a plus de sens et serait juste bancal.
   Realise avec margin-top et NON avec transform : la propriete transform est
   deja utilisee par l'animation d'apparition (.apparait), les deux se
   neutraliseraient l'une l'autre. */
@media (min-width: 62rem) {
  /* Marge negative en haut ET en bas : la carte deborde de 45 px de chaque
     cote, exactement comme la carte centrale de la reference qui est remontee
     de 45 px et plus haute de 90 px. */
  .cartes--quatre > :nth-child(even) {
    margin-block: -45px;
  }
}

.carte h3 {
  margin-top: var(--esp-m);
  margin-bottom: 0.625rem;
}
.carte p + p {
  margin-top: 0.625rem;
}
.carte p {
  font-size: 0.9375rem;
  color: var(--texte-doux);
}


/* --------------------------------------------------------------------------
   6.6 LES ETAPES DE LA METHODE
   -------------------------------------------------------------------------- */

.etapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-l);
  counter-reset: etape;
  list-style: none;
  padding: 0;
  max-width: 1068px;
  margin-inline: auto;
}

.etape {
  position: relative;
  padding-top: var(--esp-m);
}

/* Le trait qui relie les etapes entre elles */
.etape::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 44px;
  right: calc(-1 * var(--esp-l));
  height: 2px;
  background-image: linear-gradient(90deg, var(--creme-fonce) 0 5px, transparent 5px 11px);
  background-size: 11px 2px;
}
.etape:last-child::before {
  display: none;
}

.etape__numero {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--violet);
  color: var(--blanc);
  font-size: 1.125rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.etape__corps {
  margin-top: var(--esp-m);
}
.etape h3 {
  margin-bottom: 0.25rem;
}
.etape__duree {
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--violet-2);
  margin-bottom: 0.625rem;
}
.etape p:not(.etape__duree) {
  font-size: 0.9375rem;
  color: var(--texte-doux);
}


/* --------------------------------------------------------------------------
   6.7 LES ENGAGEMENTS
   -------------------------------------------------------------------------- */

.engagements {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-l) var(--esp-xl);
  list-style: none;
  padding: 0;
}

.engagement {
  display: flex;
  gap: var(--esp-s);
  align-items: flex-start;
}

.engagement__coche {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--pastel-vert);
  color: #14663D;
  flex: none;
  margin-top: 2px;
}
.engagement__coche svg {
  width: 1rem;
  height: 1rem;
}

.engagement h3 {
  margin-bottom: 0.375rem;
}
.engagement p {
  font-size: 0.9375rem;
  color: var(--texte-doux);
}


/* --------------------------------------------------------------------------
   6.8 LES TARIFS
   Une seule grande carte blanche contenant quatre lignes, plutot que quatre
   cartes separees : avec un prix par ligne, la comparaison se fait a l'oeil
   en descendant, et la mise en page tient sur mobile sans reorganisation.
   -------------------------------------------------------------------------- */

.tarifs {
  background-color: var(--blanc);
  border: 1px solid var(--creme-fonce);
  border-radius: var(--r-carte);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.tarif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-l);
  padding-block: var(--esp-m);
}
.tarif + .tarif {
  border-top: 1px solid var(--creme-fonce);
}
.tarif:first-child { padding-top: 0; }
.tarif:last-child  { padding-bottom: 0; }

.tarif__corps {
  max-width: 34rem;
}
.tarif h3 {
  margin-bottom: 0.375rem;
}
.tarif__corps p {
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

.tarif__prix {
  text-align: right;
  flex: none;
}
.tarif__mention {
  display: block;
  font-size: var(--t-petit);
  color: var(--texte-doux);
  margin-bottom: 0.125rem;
}
.tarif__montant {
  display: block;
  font-size: 2rem;          /* 32 px, valeur relevee sur la reference */
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--texte);
  white-space: nowrap;
}

.tarifs__note {
  margin-top: var(--esp-m);
  text-align: center;
  font-size: var(--t-petit);
  color: var(--texte-doux);
  max-width: 42rem;
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   6.9 LA FAQ
   Batie sur <details>, l'element depliable natif : fonctionne au clavier,
   annonce par les lecteurs d'ecran, et utilisable meme sans JavaScript.
   -------------------------------------------------------------------------- */

.faq {
  max-width: 46rem;
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid var(--creme-fonce);
}

.faq__item summary {
  /* Retire le triangle par defaut du navigateur */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-m);
  padding-block: var(--esp-m);
  font-size: var(--t-grand);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color var(--tr-rapide);
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary:hover {
  color: var(--violet);
}

/* Le chevron, dessine en CSS et pivote a l'ouverture */
.faq__item summary::after {
  content: '';
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--tr-normale);
}
.faq__item[open] summary::after {
  transform: rotate(180deg);
}

.faq__reponse {
  padding-bottom: var(--esp-m);
  padding-right: clamp(0rem, 4vw, 3rem);
  color: var(--texte-doux);
}
.faq__reponse p + p {
  margin-top: 0.75rem;
}
.faq__reponse strong {
  color: var(--texte);
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   6.10 APPEL FINAL
   Panneau sombre : apres une page entiere de creme et de blanc, il marque
   nettement la fin et fait ressortir le bouton violet.
   -------------------------------------------------------------------------- */

.final {
  text-align: center;
  background-color: var(--encre);
  border-radius: var(--r-bloc);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  color: var(--blanc);
}

.final__titre {
  color: var(--blanc);
  max-width: 20ch;
  margin-inline: auto;
}

.final__texte {
  margin: var(--esp-m) auto 0;
  max-width: 40rem;
  font-size: var(--t-grand);
  /* Blanc adouci : du blanc pur sur fond sombre fatigue a la lecture. */
  color: rgba(255, 255, 255, 0.72);
}

.final__bouton {
  margin-top: var(--esp-l);
}

.final__secours {
  margin-top: var(--esp-m);
  font-size: var(--t-petit);
  color: rgba(255, 255, 255, 0.62);
}
.final__secours a {
  color: var(--blanc);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.final__secours a:hover {
  color: var(--pastel-bleu);
}


/* --------------------------------------------------------------------------
   6.11 PIED DE PAGE
   -------------------------------------------------------------------------- */

.pied {
  padding-block: var(--esp-2xl) var(--esp-l);
}

.pied__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-l);
  padding-bottom: var(--esp-l);
  border-bottom: 1px solid var(--creme-fonce);
}

.pied__phrase {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  max-width: 26rem;
}

.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-s) var(--esp-m);
  font-size: 0.9375rem;
  font-weight: 500;
}
.pied__liens a:hover {
  color: var(--violet);
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-s);
  padding-top: var(--esp-m);
  font-size: var(--t-petit);
  color: var(--texte-doux);
}
.pied__bas a:hover {
  color: var(--violet);
}


/* --------------------------------------------------------------------------
   6.12 BOUTON ROND FLOTTANT
   -------------------------------------------------------------------------- */

.flottant {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background-color: var(--texte);
  color: var(--blanc);
  cursor: pointer;
  box-shadow: var(--ombre-flottant);
  transition: transform var(--tr-normale), opacity var(--tr-normale),
              background-color var(--tr-rapide), visibility var(--tr-normale);
}
.flottant svg {
  width: 1.5rem;
  height: 1.5rem;
}
.flottant:hover {
  background-color: var(--encre);
  transform: translateY(-3px);
}
/* Etat masque, pose par script.js quand on approche du bas de page */
.flottant--cache {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
}


/* ==========================================================================
   7. RESPONSIVE
   --------------------------------------------------------------------------
   Trois paliers, exprimes en rem et non en pixels : ainsi ils suivent le
   reglage de taille de police du visiteur, ce qui compte pour les personnes
   qui grossissent le texte de leur navigateur.

     62rem  (992 px)  passage tablette : les rangees de 4 se coupent en 2
     48rem  (768 px)  passage mobile   : tout passe en une colonne
     36rem  (576 px)  petit mobile     : on resserre les espacements

   Les tailles de texte, elles, n'ont pas besoin de paliers : elles utilisent
   deja clamp() et s'adaptent en continu.
   ========================================================================== */


/* --------------------------------------------------------------------------
   7.1 SOUS 62rem / 992px  -  TABLETTE
   -------------------------------------------------------------------------- */

@media (max-width: 61.999rem) {

  /* --- Header : la navigation ne tient plus, on la retire.
         Les memes liens restent accessibles dans le pied de page. --- */
  .entete__nav {
    display: none;
  }

  /* --- Demonstration : la scene passe en colonne --- */
  .demo__scene {
    grid-template-columns: 1fr;
    gap: var(--esp-m);
    justify-items: center;
  }
  .demo__colonne {
    width: 100%;
    max-width: 22rem;
  }
  /* Les libelles peuvent revenir a la ligne une fois la place reduite */
  .puce__texte,
  .demo__noyau-titre,
  .demo__noyau-detail {
    white-space: normal;
  }
  /* Le trait de liaison bascule a la verticale */
  .demo__liaison {
    width: 2px;
    height: 38px;
    background-image: linear-gradient(180deg, var(--creme-fonce) 0 5px, transparent 5px 11px);
    background-size: 2px 11px;
  }
  .demo__flux {
    top: 0;
    left: 50%;
    margin-top: 0;
    margin-left: -3.5px;
    animation-name: circule-vertical;
  }

  /* --- Cartes de service : deux par rangee --- */
  .cartes--quatre {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* --- Etapes : deux par rangee, sans le trait de liaison
         qui n'aurait plus de sens sur deux lignes --- */
  .etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-xl) var(--esp-l);
  }
  .etape::before {
    display: none;
  }
}

/* Version verticale de la bille qui circule */
@keyframes circule-vertical {
  0%        { top: 0;    opacity: 0; }
  12%, 88%  { opacity: 1; }
  100%      { top: 100%; opacity: 0; }
}


/* --------------------------------------------------------------------------
   7.2 SOUS 48rem / 768px  -  MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 47.999rem) {

  /* --- Header plus bas, bouton resserre --- */
  .entete {
    height: 72px;
  }
  .entete--colle {
    height: 62px;
  }
  .entete__cta {
    padding: 0.6875rem 1.0625rem;
    font-size: 0.875rem;
  }
  .logo__mot {
    font-size: 1.1875rem;
  }

  /* --- Hero : le bloc creme demarre plus haut et respire moins --- */
  .hero {
    margin-top: 72px;
    padding-top: 40px;
  }

  /* Les glyphes decoratifs viendraient chevaucher le titre : on les retire.
     Ils sont purement ornementaux, rien n'est perdu. */
  .glyphe {
    display: none;
  }

  /* --- Une seule colonne partout --- */
  .cartes--quatre,
  .etapes,
  .engagements {
    grid-template-columns: 1fr;
  }
  .etapes {
    gap: var(--esp-l);
  }
  .engagements {
    gap: var(--esp-l);
  }

  /* --- Tarifs : le prix passe sous la description --- */
  .tarif {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-s);
  }
  .tarif__prix {
    text-align: left;
  }
  .tarif__mention {
    display: inline;
    margin-right: 0.375rem;
  }
  .tarif__montant {
    display: inline;
  }

  /* --- FAQ : la reponse reprend toute la largeur --- */
  .faq__reponse {
    padding-right: 0;
  }
  .faq__item summary {
    font-size: 1rem;
  }

  /* --- Bouton flottant un peu plus petit --- */
  .flottant {
    width: 52px;
    height: 52px;
    right: 14px;
    bottom: 14px;
  }

  /* --- Pied de page en colonne --- */
  .pied__interieur {
    flex-direction: column;
    gap: var(--esp-m);
  }
}


/* --------------------------------------------------------------------------
   7.3 SOUS 36rem / 576px  -  PETIT MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 35.999rem) {

  /* Le bloc creme colle presque aux bords, comme sur la plupart des sites
     mobiles : la marge de 12 px suffit a garder l'arrondi visible. */
  .hero,
  .panneau,
  .section {
    width: calc(100% - 1rem);
  }
  .interieur {
    padding-inline: 1rem;
  }

  /* Le bouton du hero prend toute la largeur : plus facile a viser au doigt */
  .hero__actions .bouton {
    width: 100%;
    justify-content: center;
  }

  /* On masque le mot "un appel" dans le bouton du header : il reste
     "Reserver", ce qui suffit et libere de la place. */
  .entete__cta .cta__complement {
    display: none;
  }

  .final {
    padding-inline: 1.25rem;
  }
  .final__bouton {
    width: 100%;
    justify-content: center;
  }

  .pied__liens {
    flex-direction: column;
    gap: 0.625rem;
  }
}