/* Polices servies par AEDRA (SIL Open Font License, voir polices/LICENCES.txt). */
@font-face { font-family: 'Archivo'; src: url('polices/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('polices/public-sans.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('polices/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('polices/jetbrains-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* Mise en page : une trame de plan à 12 colonnes ; la ligne de cote (repères, graduations) est le motif du site. */
:root {
  --sol: #ECEDE9; --surface: #F8F8F5; --encre: #16191D; --doux: #4B5159; --trait: #CDD0CA;
  --accent: #A94E27; --accent-texte: #FFF8F2; --ok: #2F6B45; --ok-fond: #DCEBE0; --alerte: #8A5A00;
  --affiche: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --texte: 'Public Sans', system-ui, -apple-system, sans-serif;
  --chiffre: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --capture-sombre: none; --capture-claire: block;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sol: #111417; --surface: #1A1E23; --encre: #ECE8E1; --doux: #A3A8AE; --trait: #2D333A;
    --accent: #E07A4F; --accent-texte: #1B0F09; --ok: #7CCB9C; --ok-fond: #1C3326; --alerte: #E3B35C;
    --capture-sombre: block; --capture-claire: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sol: #111417; --surface: #1A1E23; --encre: #ECE8E1; --doux: #A3A8AE; --trait: #2D333A;
  --accent: #E07A4F; --accent-texte: #1B0F09; --ok: #7CCB9C; --ok-fond: #1C3326; --alerte: #E3B35C;
  --capture-sombre: block; --capture-claire: none; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--sol); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.6; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
.sombre { display: var(--capture-sombre); }
.claire { display: var(--capture-claire); }

.page { max-width: 1280px; margin: 0 auto; padding-inline: 32px; }
@media (max-width: 700px) { .page { padding-inline: 18px; } }

/* Barre */
.barre { position: sticky; z-index: 10; background: var(--sol); border-bottom: 1px solid var(--trait); }
.barre .page { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo { width: 36px; height: 36px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; color: var(--accent-texte); }
.nom { font-family: var(--affiche); font-weight: 800; font-stretch: 125%; font-size: 19px; letter-spacing: 0.14em; }
.liens { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.liens a { text-decoration: none; color: var(--doux); }
.liens a:hover { color: var(--encre); }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 8px; font-weight: 600; font-size: 16px; text-decoration: none; border: 1.5px solid transparent; transition: transform .15s ease, background-color .15s ease; }
.bouton:hover { transform: translateY(-1px); }
.plein { background: var(--accent); color: var(--accent-texte); }
.contour { border-color: var(--encre); color: var(--encre); }
.liens .bouton.plein { color: var(--accent-texte); }
@media (max-width: 860px) { .liens a.ancre { display: none; } }
.court { display: none; }
@media (max-width: 480px) { .liens .connexion, .liens .long { display: none; } .liens .court { display: inline; } .liens .bouton { padding: 0 16px; } }

/* Héros */
.heros { padding-block: 88px 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.numero { grid-column: 1 / -1; font-family: var(--chiffre); font-size: 13px; color: var(--doux); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.numero b { color: var(--accent); font-weight: 500; }
h1 { grid-column: 1 / span 10; margin: 0; font-family: var(--affiche); font-weight: 800; font-stretch: 112%; font-size: clamp(44px, 7.4vw, 104px); line-height: 0.95; letter-spacing: -0.025em; text-wrap: balance; }
h1 em { font-style: normal; color: var(--accent); }
.chapo { grid-column: 1 / span 6; margin: 8px 0 0; font-size: 20px; line-height: 1.55; color: var(--doux); max-width: 34em; }
.actions { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 900px) {
  h1, .chapo, .actions { grid-column: 1 / -1; }
  .actions { justify-content: flex-start; }
}

/* Capture principale et ligne de cote */
.cote { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 12px; font-family: var(--chiffre); font-size: 12px; color: var(--doux); margin-bottom: 14px; }
.cote .repere { width: 1px; height: 14px; background: var(--doux); }
.cote .fil { height: 1px; background: var(--doux); }
.ecran { border-radius: 14px; overflow: hidden; border: 1px solid var(--trait); background: var(--surface); box-shadow: 0 40px 80px -48px rgba(10, 12, 15, .55); }
.vitrine { padding-block: 0 104px; }

/* Déroulé */
.section { padding-block: 104px; border-top: 1px solid var(--trait); }
.etiquette { font-family: var(--chiffre); font-size: 13px; letter-spacing: 0.04em; color: var(--accent); margin: 0 0 18px; }
h2 { margin: 0; font-family: var(--affiche); font-weight: 800; font-stretch: 108%; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: 56px; }
.intro .titre { grid-column: 1 / span 7; }
.intro p { grid-column: 9 / span 4; margin: 0; color: var(--doux); }
@media (max-width: 900px) { .intro .titre, .intro p { grid-column: 1 / -1; } }

.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border-top: 2px solid var(--encre); }
.phases li { position: relative; padding: 22px 14px 0 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.phases li::before { content: ""; position: absolute; top: -10px; left: 0; width: 2px; height: 18px; background: var(--encre); }
.phases .n { font-family: var(--chiffre); font-size: 13px; color: var(--accent); }
.phases .t { font-family: var(--affiche); font-weight: 700; font-size: 18px; line-height: 1.15; }
.phases .v { font-size: 14px; line-height: 1.45; color: var(--doux); }
@media (max-width: 1000px) {
  .phases { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--encre); }
  .phases li { padding: 0 0 26px 24px; }
  .phases li::before { top: 6px; left: -10px; width: 18px; height: 2px; }
}

/* Fonctions */
.fonction { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.fonction + .fonction { margin-top: 120px; }
.fonction .texte { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fonction .visuel { grid-column: 6 / span 7; min-width: 0; }
.fonction.inverse .texte { grid-column: 9 / span 4; grid-row: 1; }
.fonction.inverse .visuel { grid-column: 1 / span 7; grid-row: 1; }
.fonction h3 { margin: 0; font-family: var(--affiche); font-weight: 800; font-stretch: 105%; font-size: 34px; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.fonction p { margin: 0; color: var(--doux); }
.puces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--trait); }
.puces li { padding: 11px 0; border-bottom: 1px solid var(--trait); font-size: 15px; display: flex; gap: 12px; }
.puces .h { font-family: var(--chiffre); font-size: 13px; color: var(--doux); font-variant-numeric: tabular-nums; min-width: 62px; padding-top: 2px; }
.duo { position: relative; padding-left: 150px; }
.telephone { position: absolute; left: 0; bottom: -48px; width: 210px; border-radius: 30px; border: 7px solid var(--encre); overflow: hidden; background: var(--surface); box-shadow: 0 30px 60px -30px rgba(10, 12, 15, .6); }
@media (max-width: 900px) {
  .fonction .texte, .fonction .visuel, .fonction.inverse .texte, .fonction.inverse .visuel { grid-column: 1 / -1; grid-row: auto; }
  .fonction + .fonction { margin-top: 80px; }
  .duo { padding-left: 0; }
  .telephone { position: static; width: 190px; margin: 20px auto 0; }
}

/* Règles */
.regles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 2px solid var(--encre); }
.regle { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--trait); }
.regle svg { color: var(--accent); margin-top: 2px; }
.regle strong { display: block; font-family: var(--affiche); font-weight: 700; font-size: 19px; line-height: 1.25; margin-bottom: 4px; }
.regle span { color: var(--doux); font-size: 15px; }
@media (max-width: 800px) { .regles { grid-template-columns: minmax(0, 1fr); } }

/* Garanties techniques */
.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.trois div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.trois strong { font-family: var(--affiche); font-weight: 700; font-size: 22px; }
.trois span { color: var(--doux); font-size: 16px; }
.code { font-family: var(--chiffre); font-size: 13px; color: var(--doux); overflow-wrap: anywhere; }
@media (max-width: 800px) { .trois { grid-template-columns: minmax(0, 1fr); } }

/* L'origine du nom */
.origine { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.origine .etiquette { grid-column: 1 / -1; margin: 0; }
.origine h2 { grid-column: 1 / span 6; }
.origine h2 em { color: var(--accent); }
.origine-texte { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 14px; }
.origine-texte p { margin: 0; color: var(--doux); }
@media (max-width: 900px) { .origine h2, .origine-texte { grid-column: 1 / -1; } }

/* Appel final */
.appel { padding-block: 120px; border-top: 1px solid var(--trait); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.appel h2 { grid-column: 1 / span 8; font-size: clamp(38px, 5.6vw, 76px); }
.appel .contact { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) { .appel h2, .appel .contact { grid-column: 1 / -1; } }

.pied { border-top: 1px solid var(--trait); }
.pied .page { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 28px; font-size: 14px; color: var(--doux); }
.pied a { color: var(--doux); }
.pied a:hover { color: var(--encre); }

.titre { min-width: 0; }
.contact p { margin: 0; color: var(--doux); }
.barre { padding-top: env(safe-area-inset-top, 0px); top: 0; }

/* Pages publiques : messagerie sécurisée, échange, mentions légales */
.feuille-publique { padding-block: 72px 104px; }
.entete-publique { max-width: 46em; margin-bottom: 48px; }
.titre-page { margin: 0; font-family: var(--affiche); font-weight: 800; font-stretch: 110%; font-size: clamp(38px, 5.4vw, 68px); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.chapo-page { margin: 18px 0 0; font-size: 19px; color: var(--doux); }
.petit-titre { font-family: var(--affiche); font-weight: 800; font-size: 26px; line-height: 1.15; margin: 0 0 16px; }
.colonnes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.formulaire { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.encart { grid-column: 9 / span 4; border-top: 2px solid var(--encre); padding-top: 20px; min-width: 0; }
@media (max-width: 900px) { .formulaire, .encart { grid-column: 1 / -1; } }
.rang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .rang { grid-template-columns: minmax(0, 1fr); } }
.champ { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; min-width: 0; }
.champ b { color: var(--accent); }
.champ small { font-weight: 400; color: var(--doux); }
.champ input, .champ select, .champ textarea { font: inherit; font-weight: 400; font-size: 16px; color: var(--encre); background: var(--surface); border: 1.5px solid var(--trait); border-radius: 8px; padding: 12px 14px; width: 100%; min-width: 0; }
.champ textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--accent); }
.compte { align-self: flex-end; font-family: var(--chiffre); font-size: 12px; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.note { margin: 0; font-size: 14px; color: var(--doux); }
button.bouton { font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; background-color: transparent; }
button.bouton.plein { background: var(--accent); }
button.bouton:disabled { opacity: .55; cursor: wait; transform: none; }
.formulaire .bouton { align-self: flex-start; }
.etapes { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; color: var(--doux); font-size: 16px; }
.etapes strong { color: var(--encre); display: block; }
.message { border-radius: 8px; padding: 12px 14px; font-size: 15px; border: 1px solid var(--trait); background: var(--surface); }
.message.erreur { border-color: var(--accent); color: var(--accent); }
.message.succes { border-color: var(--ok); color: var(--ok); background: var(--ok-fond); }
#messages:empty { display: none; }
.envoye { max-width: 46em; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.lien-prive { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; width: 100%; }
.lien-prive code { flex: 1 1 320px; min-width: 0; font-family: var(--chiffre); font-size: 14px; padding: 14px 16px; border: 1px dashed var(--doux); border-radius: 8px; overflow-wrap: anywhere; user-select: all; background: var(--surface); }

.conversation { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 16px; max-width: 52em; }
.bulle { border: 1px solid var(--trait); border-radius: 12px; padding: 14px 18px; background: var(--surface); max-width: 88%; }
.bulle.visiteur { align-self: flex-end; }
.bulle.equipe { align-self: flex-start; border-left: 3px solid var(--accent); }
.bulle .qui { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 14px; }
.bulle .qui span { font-family: var(--chiffre); font-size: 12px; color: var(--doux); }
.bulle p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.attente { color: var(--doux); font-size: 15px; font-style: italic; }
.repondre { max-width: 52em; }
.boutons-publics { display: flex; flex-wrap: wrap; gap: 12px; }

.legal section { max-width: 52em; padding-block: 28px; border-top: 1px solid var(--trait); }
.legal h3 { font-family: var(--affiche); font-weight: 700; font-size: 19px; margin: 22px 0 8px; }
.legal p, .legal li { color: var(--doux); }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal li strong { color: var(--encre); }
.fiche { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 10px 24px; margin: 0; }
.fiche dt { font-weight: 600; }
.fiche dd { margin: 0; color: var(--doux); }
@media (max-width: 640px) { .fiche { grid-template-columns: minmax(0, 1fr); gap: 2px; } .fiche dd { margin-bottom: 10px; } }

/* La marque déposée, en exposant discret */
sup.depose { font-size: 0.5em; line-height: 0; vertical-align: super; margin-left: 0.08em; letter-spacing: 0; font-weight: 600; }

/* Les pages du site faites de blocs */
.site-page { max-width: 880px; }
.site-page .titre-page { margin-bottom: 32px; }
.bloc-titre { font-family: var(--affiche); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; margin: 40px 0 14px; }
h2.bloc-titre { font-size: clamp(28px, 3.6vw, 42px); }
h3.bloc-titre { font-size: 24px; }
.bloc-texte p, .bloc-encadre p { margin: 0 0 14px; }
.bloc-texte { color: var(--encre); }
.bloc-encadre { background: var(--surface); border-left: 3px solid var(--accent); border-radius: 8px; padding: 16px 20px; margin: 18px 0; color: var(--doux); }
.bloc-encadre p:last-child { margin-bottom: 0; }
.bloc-image { margin: 24px 0; }
.bloc-image img { border-radius: 10px; border: 1px solid var(--trait); }
.bloc-image.pleine { margin-inline: calc(50% - min(50vw, 640px) + 18px); }
.bloc-image figcaption { margin-top: 8px; font-size: 14px; color: var(--doux); }
.bloc-bouton { margin: 20px 0; }
.bloc-liste { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; }
.bloc-questions { display: grid; gap: 10px; margin: 16px 0; }
.bloc-questions details { border: 1px solid var(--trait); border-radius: 10px; padding: 12px 16px; background: var(--surface); }
.bloc-questions summary { cursor: pointer; font-weight: 600; }
.bloc-questions details p { margin: 10px 0 0; color: var(--doux); }
.bloc-separateur { border: 0; border-top: 1px solid var(--trait); margin: 32px 0; }
.bandeau-apercu { background: var(--accent); color: var(--accent-texte); font-family: var(--chiffre); font-size: 13px; padding: 8px 12px; border-radius: 6px; }
.pied-menu { display: flex; flex-wrap: wrap; gap: 6px 16px; width: 100%; }
.pied-menu:empty { display: none; }
.pied-menu a { text-decoration: none; }