/* Planéo — style « couleurs du canevas » : papier chaud, encre sombre, et les couleurs
   des composantes de la PUT (Identification, Recherche, Objectifs, AdeA, Processus, Ressources, Réflexion). */
:root {
  --arc-en-ciel: linear-gradient(90deg,
    #9e9e9e 0 14.28%, #a8d08d 14.28% 28.56%, #00b0f0 28.56% 42.84%, #ffe600 42.84% 57.12%,
    #ff99cc 57.12% 71.4%, #b9f1b1 71.4% 85.68%, #b7e9f7 85.68% 100%);
  --fond: #fbf8f2;
  --surface: #ffffff;
  --texte: #24211c;
  --texte-doux: #6b655b;
  --bordure: #e7e1d5;
  --primaire: #24211c;
  --primaire-texte: #ffffff;
  --primaire-doux: #f1ece2;
  --lien: #00739b;
  --ia: #7a4cc2;
  --ia-doux: #f1ebfa;
  --alerte: #8a5a00;
  --alerte-fond: #fff5dc;
  --erreur: #a3262a;
  --erreur-fond: #fdecec;
  --succes: #1e7a43;
  --succes-fond: #dff3e6;
  --rayon: 14px;
  --ombre: 0 1px 2px rgba(60, 45, 20, 0.05), 0 2px 8px rgba(60, 45, 20, 0.06);
  color-scheme: light;
}

/* Mode sombre : suit le réglage de l'appareil, sauf si l'utilisateur a choisi un mode avec le bouton ☀ / ☾
   (attribut data-theme posé sur <html>). Les deux blocs portent les mêmes valeurs. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #15130f;
    --surface: #1f1c17;
    --texte: #f0ebe2;
    --texte-doux: #b3ab9e;
    --bordure: #3a352d;
    --primaire: #f0ebe2;
    --primaire-texte: #15130f;
    --primaire-doux: #2c2820;
    --lien: #5cc8ef;
    --ia: #b596eb;
    --ia-doux: #2a2238;
    --alerte: #f0c060;
    --alerte-fond: #3a2f14;
    --erreur: #f08a8d;
    --erreur-fond: #3b1d1f;
    --succes: #6fd39a;
    --succes-fond: #173a26;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #15130f;
  --surface: #1f1c17;
  --texte: #f0ebe2;
  --texte-doux: #b3ab9e;
  --bordure: #3a352d;
  --primaire: #f0ebe2;
  --primaire-texte: #15130f;
  --primaire-doux: #2c2820;
  --lien: #5cc8ef;
  --ia: #b596eb;
  --ia-doux: #2a2238;
  --alerte: #f0c060;
  --alerte-fond: #3a2f14;
  --erreur: #f08a8d;
  --erreur-fond: #3b1d1f;
  --succes: #6fd39a;
  --succes-fond: #173a26;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2 { line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 1.55rem; font-weight: 750; }
h2 { font-size: 1.2rem; font-weight: 700; }
a { color: var(--lien); }

/* --- Barre du haut : bande aux couleurs du canevas --- */
.barre {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px 10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
}
.barre::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--arc-en-ciel); }
.lien-accueil {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--texte); font: inherit; text-align: left;
}
.lien-accueil img { border-radius: 9px; }
.marque { display: grid; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.05; }
.marque small { font-size: 0.72rem; font-weight: 500; letter-spacing: 0; color: var(--texte-doux); }
.barre-droite { display: flex; align-items: center; gap: 8px; }
.pastille {
  font-size: 0.8rem; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--bordure); color: var(--texte-doux); white-space: nowrap;
}
.pastille.en-ligne::before { content: "● "; color: var(--succes); }
.pastille.hors-ligne { color: var(--alerte); background: var(--alerte-fond); border-color: transparent; }
.pastille.hors-ligne::before { content: "● "; }

main { max-width: 860px; margin: 0 auto; padding: 20px 16px 40px; }
.chargement, .vide { color: var(--texte-doux); }

/* --- Boutons --- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 16px;
  border-radius: 12px; border: 1px solid var(--bordure);
  background: var(--surface); color: var(--texte);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, filter 0.15s;
}
.bouton:hover { border-color: var(--primaire); }
.bouton:active { transform: translateY(1px); }
.bouton.principal { background: var(--primaire); border-color: var(--primaire); color: var(--primaire-texte); }
.bouton.principal:hover { filter: brightness(1.25); }
.bouton.petit { min-height: 34px; padding: 6px 12px; font-size: 0.9rem; }
.bouton.discret { border-color: transparent; background: transparent; color: var(--texte-doux); }
.bouton.lien { border: 0; background: none; padding: 0 4px; min-height: 0; color: var(--lien); text-decoration: underline; }
.bouton.ia { margin-top: 8px; color: var(--ia); border-color: var(--ia); background: var(--ia-doux); }
.bouton-icone {
  width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--bordure);
  background: var(--surface); color: var(--texte); font-size: 1.15rem; cursor: pointer;
}
.bouton-icone.discret { border-color: transparent; background: transparent; }
:focus-visible { outline: 3px solid var(--primaire); outline-offset: 2px; }

/* --- Accueil --- */
.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sous-titre { margin: 4px 0 0; color: var(--texte-doux); }

.hero {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 20px; box-shadow: var(--ombre);
  padding: 30px 24px 22px; margin-bottom: 18px;
}
.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--arc-en-ciel); }
.hero-sur { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.hero h1 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); max-width: 20ch; }
.hero .sous-titre { max-width: 62ch; margin-top: 8px; }
.hero .boutons-accueil { margin-top: 18px; }

.parcours { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; }
.parcours li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 4px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  background: color-mix(in srgb, var(--couleur) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--couleur) 55%, var(--surface));
}
.parcours li.facultatif { border-style: dashed; opacity: 0.8; }
.parcours-num {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--couleur); color: #1d1b17; font-size: 0.78rem; font-weight: 800;
}
.parcours li:nth-last-child(-n+2) .parcours-num { color: #ffffff; }

.entete-liste { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 10px; }
.liste-put { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.carte-put {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding-right: 8px;
}
.carte-put-ouvrir {
  flex: 1; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 14px 16px; color: var(--texte); font: inherit; display: grid; gap: 2px;
}
.carte-put { transition: transform 0.15s, box-shadow 0.15s; }
.carte-put:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(60, 45, 20, 0.1); }
.carte-put-titre { font-weight: 700; font-size: 1.05rem; }
.carte-put-meta { font-size: 0.875rem; color: var(--texte-doux); }
.barre-avancement { display: flex; gap: 4px; margin-top: 8px; }
.barre-avancement .segment {
  flex: 1; height: 7px; border-radius: 4px; position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--couleur) 22%, var(--bordure));
}
.barre-avancement .segment::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--part); background: var(--couleur); }
.barre-avancement.importee { font-size: 0.8rem; color: var(--texte-doux); }
@media (prefers-reduced-motion: reduce) { .carte-put, .bouton { transition: none; } .carte-put:hover { transform: none; } }

/* --- Encarts --- */
.encart { padding: 10px 14px; border-radius: 12px; margin: 10px 0; font-size: 0.95rem; }
.encart.info { background: var(--primaire-doux); }
.encart.alerte { background: var(--alerte-fond); color: var(--alerte); }
.encart.erreur { background: var(--erreur-fond); color: var(--erreur); }
.encart.attente { background: var(--ia-doux); color: var(--ia); display: flex; align-items: center; gap: 10px; }
.roue {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: tourner 0.8s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roue { animation-duration: 2.4s; } }

/* --- Assistant --- */
.entete-editeur { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.etat-sauvegarde { font-size: 0.85rem; color: var(--texte-doux); }

.etapes {
  display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 6px; margin: 0 -16px 8px; padding-inline: 16px;
  scrollbar-width: thin;
}
.etape {
  flex: none; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center;
  min-width: 132px; padding: 8px 12px; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--texte); font: inherit;
  border: 1px solid var(--bordure); border-top: 5px solid var(--couleur); border-radius: 12px;
}
.etape:hover { background: color-mix(in srgb, var(--couleur) 10%, var(--surface)); }
.etape:disabled { cursor: default; opacity: 0.5; }
.etape.courante { box-shadow: 0 0 0 2px var(--primaire); }
.etape-num {
  grid-row: span 2; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.85rem; font-weight: 700;
  background: var(--couleur); color: #1d2430;
}
.etape-titre { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etape-prog { font-size: 0.75rem; color: var(--texte-doux); }

.titre-composante {
  margin: 18px 0 8px; padding: 12px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--couleur) 22%, var(--surface));
  border-left: 8px solid var(--couleur);
}

.champ {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 16px; margin: 14px 0;
}
.champ-entete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.champ-entete label { font-weight: 650; }
.guide { margin: 4px 0 10px; color: var(--texte-doux); font-size: 0.92rem; }
.badge {
  font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--primaire-doux); color: var(--primaire);
}
.badge.ia { background: var(--ia-doux); color: var(--ia); }

input[type="text"], input[type="number"], input[type="password"], textarea, select {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--bordure); background: var(--fond); color: var(--texte);
  font: inherit;
}
textarea { resize: vertical; min-height: 84px; }
input:focus, textarea:focus, select:focus { border-color: var(--primaire); outline: none; box-shadow: 0 0 0 3px var(--primaire-doux); }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; cursor: pointer; }
.puce input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.puce span {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--bordure); background: var(--fond); font-size: 0.92rem;
}
.puce input:checked + span { background: var(--primaire); border-color: var(--primaire); color: var(--primaire-texte); }
.puce input:focus-visible + span { outline: 3px solid var(--primaire); outline-offset: 2px; }

.questions { display: grid; gap: 12px; }
.sous-champ { display: grid; gap: 4px; font-weight: 600; font-size: 0.95rem; }
.sous-champ small { display: block; font-weight: 400; color: var(--texte-doux); }

.cartes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 10px; }
.carte {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border-radius: var(--rayon);
  border: 1px solid var(--ia); background: var(--ia-doux);
}
.carte-texte { font-size: 0.95rem; }
.carte-texte ul { margin: 4px 0 8px; padding-left: 20px; }
.carte-apport { margin: 0; font-size: 0.85rem; color: var(--texte-doux); flex: 1; }
.carte .bouton { align-self: flex-start; }

.navigation {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 24px;
}
.note { color: var(--texte-doux); font-size: 0.875rem; }

/* --- Composantes 2 à 7 --- */
.etape.complete .etape-num { background: var(--succes); color: #fff; }
.phase { margin: 0; font-size: 1.05rem; }
.entete-phase {
  margin: 26px 0 8px; padding: 14px 16px; border-radius: var(--rayon);
  background: var(--ia-doux); display: grid; gap: 6px;
}
.entete-phase .note { margin: 0; }
.entete-phase .bouton.ia { justify-self: start; background: var(--surface); }
.note.fin { text-align: right; margin-top: 10px; }

.groupe, .element, .critere {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  margin: 14px 0; padding: 4px 14px 14px; min-width: 0;
}
.groupe { border-left: 4px solid var(--couleur); background: color-mix(in srgb, var(--couleur) 6%, transparent); }
.groupe > legend, .element > legend, .critere > legend { font-weight: 700; padding: 0 6px; }
.groupe .champ { margin: 10px 0; }
.element { background: var(--fond); margin: 10px 0; }
.critere legend { font-weight: 650; }

.criteres { display: grid; gap: 4px; }
.case { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; font-size: 0.95rem; }
.case input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--primaire); }

.grille-volets { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sous-champ.large { grid-column: 1 / -1; }
.liste-elements > .bouton { margin-top: 4px; }
select:disabled { opacity: 0.6; }

.source-ia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; }

/* --- Checklist et évaluation IB --- */
.verification .champ-entete h3 { margin: 0; font-size: 1.05rem; flex: 1; }
.barre-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.barre-action .encart { margin: 0; }
.bouton:disabled { opacity: 0.5; cursor: default; }
.bilan { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }

.verdict, .niveau {
  display: inline-block; flex: none; min-width: 64px; text-align: center;
  font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.verdict.oui { background: var(--succes-fond); color: var(--succes); }
.verdict.partiel { background: var(--alerte-fond); color: var(--alerte); }
.verdict.non { background: var(--erreur-fond); color: var(--erreur); }
.verdict.vide { background: var(--fond); color: var(--texte-doux); }

.bilan strong { font-size: 0.9rem; align-self: center; margin-right: 4px; }
.bilan .note { align-self: center; }
.avis-manuel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 6px; }
.choix-verdict {
  min-width: 72px; min-height: 34px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bordure); background: var(--surface); color: var(--texte); font: inherit; font-size: 0.88rem; font-weight: 600;
}
.choix-verdict:hover { border-color: var(--primaire); }
.choix-verdict.verdict { border-color: transparent; }
.commentaire-manuel { min-height: 38px; font-size: 0.92rem; }
.avis-ia { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--ia); background: var(--ia-doux); border-radius: 0 8px 8px 0; }
.avis-ia p { margin: 4px 0; }
.point { border-top: 1px solid var(--bordure); padding: 12px 0 8px; }
.point:first-of-type { border-top: 0; }
.point-entete { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.point p { margin: 6px 0; }
blockquote {
  margin: 6px 0; padding: 6px 12px; border-left: 4px solid var(--bordure);
  color: var(--texte-doux); font-style: italic; background: var(--fond); border-radius: 0 6px 6px 0;
}
.suggestion { background: var(--primaire-doux); padding: 8px 12px; border-radius: 8px; }

.niveau.familiarisation { background: var(--erreur-fond); color: var(--erreur); }
.niveau.utilisation { background: var(--alerte-fond); color: var(--alerte); }
.niveau.partage { background: var(--succes-fond); color: var(--succes); }

.resume-ib { width: 100%; border-collapse: collapse; margin: 14px 0; background: var(--surface); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.resume-ib th, .resume-ib td { border: 1px solid var(--bordure); padding: 8px 10px; font-size: 0.92rem; }
.resume-ib th { background: var(--fond); text-align: center; }
.resume-ib th:nth-child(n+2) { width: 17%; }
.resume-ib td.atteint.familiarisation { background: var(--erreur-fond); color: var(--erreur); }
.resume-ib td.atteint.utilisation { background: var(--alerte-fond); color: var(--alerte); }
.resume-ib td.atteint.partage { background: var(--succes-fond); color: var(--succes); }

/* --- Import d'une PUT Word ou PDF --- */
.boutons-accueil { display: flex; flex-wrap: wrap; gap: 8px; }
.source-import p { margin: 0 0 6px; }
.source-import details { margin-top: 4px; }
.texte-importe {
  max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 8px; padding: 10px;
  font: 0.82rem/1.45 ui-monospace, Consolas, monospace; color: var(--texte);
}
.bandeau-import {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 50; margin: 0; box-shadow: var(--ombre); background: var(--surface);
}

/* --- Pied de page (mention des droits) --- */
.pied-app {
  position: relative;
  max-width: 860px; margin: 0 auto; padding: 18px 16px 28px;
  color: var(--texte-doux); font-size: 0.85rem; text-align: center;
}

.defilement-tableau { overflow-x: auto; }
.resume-ib th small { font-weight: 400; color: var(--texte-doux); }
.resume-ib tr.section td { background: var(--fond); color: var(--texte-doux); font-weight: 700; text-align: left; }
.resume-ib td.num { width: 2.2em; text-align: center; color: var(--texte-doux); }
.resume-ib td:nth-child(n+3) { text-align: center; }
.contexte-ib { width: 100%; border-collapse: collapse; }
.contexte-ib th, .contexte-ib td { border: 1px solid var(--bordure); padding: 8px 10px; vertical-align: top; text-align: left; }
.contexte-ib th { width: 28%; background: var(--fond); font-size: 0.92rem; }
.contexte-ib p { margin: 0 0 4px; }
.contexte-ib .vide { color: var(--erreur); }
.requis { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.requis .present { color: var(--succes); }
.requis .absent { color: var(--erreur); }
.element-ib ul, .element-ib ol { margin: 4px 0 10px; }

.pied-app::before { content: ""; position: absolute; inset: 0 16px auto; height: 3px; border-radius: 2px; background: var(--arc-en-ciel); opacity: 0.7; }

/* --- Paramètres --- */
dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  border: 1px solid var(--bordure); border-radius: 14px; padding: 0;
  background: var(--surface); color: var(--texte);
}
dialog::backdrop { background: rgba(10, 14, 20, 0.5); }
.parametres { padding: 20px; display: grid; gap: 8px; }
.parametres p { margin: 0; }
.parametres label { font-weight: 600; margin-top: 8px; }
.parametres details { background: var(--fond); border-radius: 8px; padding: 10px 14px; }
.parametres summary { cursor: pointer; font-weight: 600; }
.ligne { display: flex; gap: 8px; }
.ligne input { flex: 1; min-width: 0; }

/* --- Export --- */
.options-export { display: grid; gap: 8px; margin: 8px 0; }
.options-export label { font-weight: 400; margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.options-export input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--primaire); }
.boutons-export { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 8px; }
#impression { display: none; }

/* Impression / PDF : même mise en page que le modèle Word de l'établissement (Lettre paysage, police Abadi). */
@media print {
  @page { size: letter landscape; margin: 15mm 18mm 17mm 15mm; }
  body { background: #fff; color: #000; }
  body > *:not(#impression) { display: none !important; }
  #impression { display: block; }
  #impression .put-doc { font-family: Abadi, Arial, "Helvetica Neue", sans-serif; font-size: 10pt; line-height: 1.25; color: #000; }
  #impression table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; }
  #impression .put-doc > table { margin-bottom: 8pt; }
  #impression table.imbrique { margin: 3pt 0 6pt; }
  #impression td { padding: 2pt 5pt; vertical-align: top; overflow-wrap: anywhere; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #impression p { margin: 0 0 2pt; }
  #impression p.ligne-liste { padding-left: 12pt; text-indent: -8pt; }
  #impression p.ligne-liste::before { content: "• "; }
  #impression img { display: inline-block; vertical-align: middle; }
  #impression .saut-page { page-break-before: always; }
}

@media (max-width: 560px) {
  h1 { font-size: 1.3rem; }
  .marque small { display: none; }
  .hero { padding: 24px 16px 18px; border-radius: 16px; }
  .hero .boutons-accueil .bouton { flex: 1 1 100%; }
  .parcours li { font-size: 0.8rem; }
  .entete-page .bouton { width: 100%; }
  .ligne { flex-direction: column; }
  .navigation .bouton { flex: 1; }
}