/* =========================================================
   Klikoo : style commun des pages secondaires
   (merci.html, confidentialite.html, 404.html)
   Mêmes jetons que la page d'accueil : marine, crème, orange pour les actions seulement.
   ========================================================= */
:root{
  --encre:#1C1F3D;
  --fond:#F8F6F1;
  --accent:#FF5A36;
  --btn:#1C1F3D;
  --papier:#FFFFFF;
  --texte-doux:rgba(28,31,61,.74);
  --ligne:rgba(28,31,61,.16);
  --survol:rgba(28,31,61,.08);
  --ease:cubic-bezier(.32,.72,0,1);
  --dur:200ms;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;
  --gouttiere:16px;
  --titre:"Fraunces",Georgia,"Times New Roman",serif;
  --corps:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (min-width:600px){:root{--gouttiere:32px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--fond);color:var(--encre);font:400 1.0625rem/1.6 var(--corps)}
p,ul,ol,h1,h2,h3{margin:0}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.08em}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;border-radius:8px}
.conteneur{width:100%;max-width:calc(1200px + 2 * var(--gouttiere));margin-inline:auto;padding-inline:var(--gouttiere)}
.colonne{width:100%;max-width:calc(720px + 2 * var(--gouttiere));margin-inline:auto;padding-inline:var(--gouttiere)}
.saut{position:absolute;left:var(--s2);top:-80px;z-index:100;background:var(--encre);color:var(--fond);padding:var(--s1) var(--s2);border-radius:16px;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.saut:focus{top:var(--s1)}

/* En-tête */
.entete{border-bottom:1px solid var(--ligne)}
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:64px}
.marque{display:inline-flex;align-items:center;min-height:44px;font:800 1.75rem/1 var(--titre);letter-spacing:-.02em;color:var(--encre);text-decoration:none}
.marque .point{color:var(--accent)}
.entete__lien{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;padding:0 var(--s2);border-radius:999px;font-weight:600;font-size:.9375rem;text-decoration:none;transition:background-color var(--dur) var(--ease)}
.entete__lien:hover{background:var(--survol)}
.ic{width:20px;height:20px;flex:none}

/* Contenu */
main{flex:1;padding-block:var(--s8) var(--s10)}
.question{font:600 1.0625rem/1.4 var(--corps);color:var(--texte-doux);margin-bottom:var(--s2)}
.titre-xl{font:800 clamp(2.25rem,1.5rem + 3.4vw,4rem)/1.04 var(--titre);letter-spacing:-.025em;text-wrap:balance}
.chapeau{margin-top:var(--s3);font-size:1.1875rem;line-height:1.5;color:var(--texte-doux);max-width:52ch}
.petit{font-size:.9375rem;color:var(--texte-doux)}

/* Boutons */
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:52px;padding:0 var(--s3);border:2px solid transparent;border-radius:999px;font:700 1.0625rem/1.2 var(--corps);text-align:center;text-decoration:none;cursor:pointer;transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:active{transform:scale(.97)}
.btn--action{background:var(--accent);color:var(--btn)}
.btn--action:hover{background:#FF7352;transform:translateY(-2px)}
.btn--contour{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn--contour:hover{background:var(--encre);color:var(--fond)}

/* La fiche et son tampon (signature visuelle du site) */
.fiche{background:var(--papier);border:2px solid var(--encre);border-radius:24px;box-shadow:8px 8px 0 var(--encre);padding:var(--s2) var(--s3);max-width:360px;margin-top:var(--s6)}
.fiche__nom{font-weight:700;font-size:1.0625rem;line-height:1.3}
.fiche__meta{font-size:.9375rem;color:var(--texte-doux);margin-top:4px}
.fiche__site{margin-top:var(--s1);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);font-weight:600}
.fiche__site s{color:var(--texte-doux);text-decoration-thickness:2px}
.tampon{display:inline-block;padding:4px var(--s1);border:3px solid var(--encre);border-radius:8px;font:700 .8125rem/1.2 var(--corps);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-4deg)}
@media (prefers-reduced-motion:no-preference){.tampon{animation:tamponne .3s var(--ease) .4s both}}
@keyframes tamponne{from{opacity:0;transform:rotate(-4deg) scale(1.35)}to{opacity:1;transform:rotate(-4deg) scale(1)}}

/* Étapes (merci) */
.suite{display:grid;gap:var(--s2);margin-top:var(--s5);counter-reset:suite}
.suite li{display:grid;grid-template-columns:40px 1fr;gap:var(--s2);align-items:center;counter-increment:suite;list-style:none}
.suite li::before{content:counter(suite);display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--encre);border-radius:50%;font:700 1.125rem/1 var(--corps)}
.suite{padding:0}

/* Texte long (politique) */
.texte h2{font:700 1.375rem/1.3 var(--corps);letter-spacing:-.01em;margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--ligne)}
.texte p{margin-top:var(--s2);max-width:62ch}
.texte a{font-weight:600}
.lien-touche{padding-block:16px;font-weight:600} /* zone à toucher plus haute, sans changer l'interligne */
.date{margin-top:var(--s2);font-weight:600;color:var(--texte-doux)}
.encadre{margin-top:var(--s3);padding:var(--s2) var(--s3);border-left:3px solid var(--encre);background:var(--papier);border-radius:0 16px 16px 0}

/* Pied de page */
.pied{border-top:1px solid var(--ligne);padding-block:var(--s5)}
.pied .conteneur{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4)}
.pied__liens{display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.pied__liens a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-weight:600}
/* Réseaux sociaux : de simples liens (aucun module, aucun script de Facebook ou d'Instagram) */
.reseaux{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2)}
.pied .conteneur > .petit{flex-basis:100%} /* le © sur sa propre ligne, sous les liens */
.reseaux__titre{font-weight:700;font-size:.9375rem}
.reseaux ul{display:flex;flex-wrap:wrap;gap:var(--s1);padding:0;list-style:none}
.reseaux a{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;padding:0 var(--s2) 0 12px;border:2px solid var(--encre);border-radius:999px;font-weight:600;text-decoration:none;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.reseaux a:hover{background:var(--encre);color:var(--fond)}
@media (max-width:359px){.reseaux a{padding:0 12px 0 10px}} /* les 2 pastilles restent sur une ligne */

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}