/* ===========================================================================
   Appel à candidatures « patients partenaires » — Saint-Roch
   ---------------------------------------------------------------------------
   Pas de framework. La page a trois écrans, un formulaire et quatre
   illustrations : y ajouter Bootstrap coûterait plus d'octets que tout le
   reste réuni, sur des téléphones qui scannent un QR code en salle d'attente.

   Les couleurs sont relevées sur l'affiche A3 elle-même (Doc 1) : le bleu des
   titres, l'orange du bandeau, le bleu clair du texte courant. Un patient qui
   passe du papier à l'écran doit reconnaître la même campagne.

   Le lecteur type a soixante-dix ans et lit sur un téléphone tenu à bout de
   bras : corps de texte à 17,5 px, interlignage large, cibles tactiles à
   48 px, contrastes tenus au-dessus de 4,5:1.

   L'ordre du fichier suit celui de la page : tokens, barre, hero, sections,
   formulaire, pied de page.
   =========================================================================== */

/* ---------- POLICES ---------- */
@font-face{font-family:'Bricolage';src:url('../fonts/bricolage-latin.woff2') format('woff2');
  font-weight:200 800;font-display:swap;
  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:'Bricolage';src:url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'SpaceG';src:url('../fonts/spacegrotesk-latin.woff2') format('woff2');
  font-weight:300 700;font-display:swap;
  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:'SpaceG';src:url('../fonts/spacegrotesk-latin-ext.woff2') format('woff2');
  font-weight:300 700;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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;}

/* ---------- TOKENS ---------- */
:root{
  --blue:#004899;          /* le bleu des titres de l'affiche */
  --blue-deep:#00305F;     /* les fonds sombres */
  --navy:#173659;          /* le bleu des illustrations */
  --blue-soft:#A1C0E5;     /* le texte courant de l'affiche */
  --orange:#FF7B36;        /* le bandeau, les pastilles, l'action */
  --orange-deep:#EE7203;
  --ink:#12283F;           /* le texte, un noir bleuté */
  --muted:#5B6E85;
  --paper:#FFFFFF;
  --sky:#F2F7FC;           /* le fond de page */
  --sky-2:#E4EEF8;
  --line:#D8E4F1;
  --ok:#0F7A52;
  --err:#C0341A;
  --wrap:1120px;
  --r:16px;
  --shadow:0 1px 2px rgba(0,72,153,.05), 0 10px 28px rgba(0,72,153,.07);
  --shadow-up:0 3px 8px rgba(0,72,153,.08), 0 22px 48px rgba(0,72,153,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}

/* L'attribut hidden doit gagner contre nos display:flex — sans quoi le champ
   « Autre : précisez » resterait visible après un changement de situation. */
[hidden]{display:none !important}

html{scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--sky);
  color:var(--ink);
  font-family:'SpaceG',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:'Bricolage','SpaceG',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0;color:var(--blue)}
p{margin:0 0 1rem}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--orange-deep)}
img{max-width:100%;height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 2.2rem,var(--wrap));margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===========================================================================
   BARRE HAUTE
   =========================================================================== */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem clamp(.9rem,3vw,1.5rem);
  background:var(--blue-deep);
  color:#fff;
}
.topbar__brand,.topbar__brand:hover{display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none}
.topbar__logo{height:30px;width:auto;background:#fff;border-radius:6px;padding:3px 7px}
.topbar__tag{font-size:.82rem;line-height:1.25;letter-spacing:.01em}
.topbar__tag b{display:block;font-weight:600}
.topbar__tag i{font-style:normal;opacity:.62}
.topbar__cta{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.6rem 1.1rem;border-radius:999px;border:0;
  background:var(--orange);color:#fff;
  font-size:.95rem;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.topbar__cta:hover{background:var(--orange-deep);color:#fff;transform:translateY(-1px)}
@media (max-width:640px){.topbar__tag{display:none}}

/* ===========================================================================
   HERO
   =========================================================================== */
.hero{
  position:relative;
  padding:clamp(2.2rem,6vw,3.6rem) 0 clamp(2rem,5vw,3rem);
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(255,123,54,.13), transparent 60%),
    linear-gradient(180deg,#fff 0%, var(--sky) 100%);
  overflow:hidden;
}
/* L'arc orange de l'affiche, repris en filigrane. Décoratif : il disparaît
   sous 900 px plutôt que de bousculer le texte. */
.hero::after{
  content:'';position:absolute;left:-14%;bottom:-58%;
  width:52%;aspect-ratio:1;border-radius:50%;
  border:16px solid rgba(255,123,54,.16);border-right-color:transparent;border-top-color:transparent;
  pointer-events:none;
}
@media (max-width:900px){.hero::after{display:none}}

/* La photo de fond, à droite : une chambre, un médecin, une soignante.
   Elle n'est pas là pour être regardée — elle donne de la matière derrière
   l'illustration, en gris et très en retrait, pour ne concurrencer ni le titre
   ni le personnage dessiné qui se pose devant.

   Le masque radial est ancré à droite : la photo s'éteint vers la gauche, le
   haut et le bas d'un seul dégradé, sans bord franc à raccorder. C'est ce qui
   lui permet de se fondre dans le dégradé du hero au lieu de s'y découper.

   Purement décorative, donc en fond CSS et non en <img> : elle n'a rien à dire
   à un lecteur d'écran, et n'a pas de texte alternatif à porter. Le gris est
   cuit dans le fichier plutôt que posé en filter : un filter sur une surface de
   cette taille se recalcule à chaque peinture. */
.hero::before{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  /* Le bloc adopte le format de la photo (3:2) au lieu de lui imposer le sien :
     ainsi « cover » n'a plus rien à rogner, et les trois personnes restent
     entières. Un bandeau pleine hauteur découperait forcément quelque part — et
     ce serait la patiente, allongée en bas à gauche du cadre. */
  width:min(56%,780px);aspect-ratio:3/2;
  background:url('../../img/hero/chambre-soignants.webp') center/cover no-repeat;
  opacity:.19;
  pointer-events:none;
  /* Deux fondus croisés plutôt qu'un seul rond. Un fondu radial ne pouvait pas
     éteindre les quatre bords sans effacer la patiente, allongée dans un coin
     du cadre : tout ce qui est loin du centre s'éteint ensemble, elle comprise.
     En croisant un fondu horizontal et un fondu vertical, chaque axe se règle
     séparément — franc à gauche, là où passent le titre et la citation ; juste
     ce qu'il faut en haut et en bas pour dissoudre l'arête. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 26%),
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0%, #000 26%),
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
/* Sous 860 px la grille passe à une colonne : la photo se retrouverait sous le
   titre et la citation, où elle ne ferait que salir le texte. */
@media (max-width:860px){.hero::before{display:none}}

.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.4rem,4vw,3rem);align-items:center}
@media (max-width:860px){.hero__grid{grid-template-columns:1fr}}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .95rem;margin-bottom:1.1rem;border-radius:999px;
  background:rgba(0,72,153,.09);color:var(--blue);
  font-size:.86rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
}
.hero__eyebrow span{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}

.hero h1{font-size:clamp(2.2rem,6.4vw,4rem);text-transform:uppercase;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--orange)}

/* Le bandeau de citation de l'affiche, mot pour mot. */
.hero__quote{
  position:relative;margin:1.5rem 0 1.4rem;padding:1.15rem 1.4rem 1.15rem 1.6rem;
  background:var(--orange);color:#fff;border-radius:4px;
  font-size:clamp(1.05rem,2.4vw,1.32rem);font-weight:500;line-height:1.45;
}
.hero__quote::before{
  content:'\201C';position:absolute;top:-.42em;left:.3rem;
  font-family:'Bricolage',serif;font-size:4.2rem;color:rgba(255,255,255,.32);line-height:1;
}
.hero__lede{font-size:1.06rem;color:var(--muted);max-width:46ch}

.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;align-items:center}
.hero__art{display:flex;justify-content:center}

/* L'illustration en calques : l'ombre portée s'applique au cadre entier pour
   que l'ensemble garde la même assise qu'avant la découpe, et les icônes se
   positionnent en % afin de suivre le redimensionnement du cadre. */
.hero__scene{position:relative;width:min(100%,380px);filter:drop-shadow(0 18px 34px rgba(0,72,153,.14))}
.hero__scene>img:first-child{display:block;width:100%;height:auto}
.hero__float{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto}

/* Le flottement ne démarre que si l'utilisateur accepte le mouvement ; sinon
   les icônes restent à leur place d'origine et l'image est identique à la
   version d'un seul tenant. Les délais négatifs désynchronisent les cycles. */
@media (prefers-reduced-motion:no-preference){
  .hero__float{animation:hero-float var(--d,6s) ease-in-out var(--delay,0s) infinite alternate;will-change:transform}
  @keyframes hero-float{
    from{transform:translate(calc(var(--dx,2%)*-1),7%) rotate(calc(var(--r,2deg)*-1))}
    to{transform:translate(var(--dx,2%),-11%) rotate(var(--r,2deg))}
  }
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:.85rem 1.7rem;border:0;border-radius:999px;
  font-size:1.02rem;font-weight:700;text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.btn--primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(255,123,54,.32)}
.btn--primary:hover{background:var(--orange-deep);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,123,54,.4)}
.btn--ghost{background:transparent;color:var(--blue);border:2px solid var(--line)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* ===========================================================================
   SECTIONS
   =========================================================================== */
.section{padding:clamp(2.4rem,6vw,4rem) 0}
.section--paper{background:var(--paper)}
.section__head{max-width:56ch;margin-bottom:1.9rem}
.section__head h2{font-size:clamp(1.55rem,3.6vw,2.3rem)}
.section__head p{margin-top:.7rem;color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3.2rem);align-items:center}
.split--art-first .split__art{order:-1}
@media (max-width:820px){
  .split{grid-template-columns:1fr}
  /* En colonne unique, le texte d'abord : l'illustration passe sous le
     propos, quel que soit son côté d'origine dans la grille. */
  .split .split__art{order:1}
}
.split__art{display:flex;justify-content:center}
.split__art img{width:min(100%,330px)}

/* ---------- La liste des chirurgies ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.2rem 0 0;padding:0;list-style:none}
.chips li{
  padding:.5rem 1.05rem;border-radius:999px;
  background:var(--sky-2);color:var(--navy);
  font-size:.98rem;font-weight:600;
}

/* ---------- Les axes, avec la pastille cochée de l'affiche ---------- */
.axes{margin:0;padding:0;list-style:none;display:grid;gap:.7rem}
.axes li{display:flex;align-items:flex-start;gap:.75rem;font-size:1.05rem;color:var(--navy);font-weight:500}
.axes li::before{
  content:'';flex:none;width:24px;height:24px;margin-top:.22em;border-radius:50%;
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;
}

.note{
  margin-top:1.5rem;padding:1rem 1.25rem;
  background:#FFF4EE;border-left:4px solid var(--orange);border-radius:0 8px 8px 0;
  font-size:1.03rem;color:var(--ink);
}
.note strong{color:var(--orange-deep)}

/* ---------- Les engagements ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.9rem}
.card{
  position:relative;padding:1.5rem 1.35rem 1.35rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-up)}
.card__n{
  display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:.85rem;
  border-radius:50%;background:var(--blue);color:#fff;
  font-family:'Bricolage',sans-serif;font-weight:700;font-size:1rem;
}
.card h3{font-size:1.1rem;margin-bottom:.45rem;color:var(--navy)}
.card p{margin:0;font-size:.97rem;color:var(--muted);line-height:1.6}

/* ---------- Le bandeau sombre avant le formulaire ---------- */
.cta-band{
  background:var(--blue-deep);color:#fff;
  padding:clamp(2.2rem,5vw,3.2rem) 0;
  background-image:radial-gradient(700px 300px at 15% 0%, rgba(255,123,54,.22), transparent 62%);
}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2.1rem)}
.cta-band p{color:rgba(255,255,255,.78);max-width:52ch;margin-top:.7rem}
.cta-band__inner{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:space-between}

/* ===========================================================================
   FORMULAIRE
   =========================================================================== */
.form-section{padding:clamp(2.4rem,6vw,4rem) 0;background:var(--sky)}
.form-card{
  max-width:820px;margin-inline:auto;padding:clamp(1.4rem,4vw,2.6rem);
  background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);
}
.form-card__head{text-align:center;margin-bottom:2rem}
.form-card__head h2{font-size:clamp(1.45rem,3.4vw,2rem)}
.form-card__head p{margin-top:.6rem;color:var(--muted)}

fieldset{margin:0 0 1.9rem;padding:0;border:0}
legend{
  padding:0;margin-bottom:1rem;
  font-family:'Bricolage',sans-serif;font-size:1.05rem;font-weight:700;color:var(--blue);
  letter-spacing:.01em;
}
legend small{display:block;font-family:'SpaceG',sans-serif;font-size:.86rem;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:.15rem}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:.5fr 1fr;gap:1rem}
@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}

.field{margin-bottom:1rem}
.field:last-child{margin-bottom:0}
.field > label,.field__label{
  display:block;margin-bottom:.4rem;
  font-size:.94rem;font-weight:600;color:var(--navy);
}
.field__label .opt{font-weight:400;color:var(--muted)}

.input,textarea.input,select.input{
  width:100%;min-height:52px;padding:.75rem 1rem;
  background:#fff;color:var(--ink);
  border:2px solid var(--line);border-radius:11px;
  font:inherit;font-size:1.02rem;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
textarea.input{min-height:112px;resize:vertical;line-height:1.6}
.input:hover{border-color:#BBD0E6}
.input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,72,153,.12)}
.input::placeholder{color:#9AABBC}

/* Les listes de choix, en cibles cliquables entières plutôt qu'en petits
   ronds : sur un téléphone, viser un radio de 14 px est un exercice. */
.choices{display:flex;flex-wrap:wrap;gap:.6rem}
.choice{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  min-height:50px;padding:.6rem 1.15rem;
  border:2px solid var(--line);border-radius:999px;background:#fff;
  font-size:1rem;font-weight:500;color:var(--navy);cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice__dot{
  flex:none;width:19px;height:19px;border-radius:50%;
  border:2px solid #BBD0E6;background:#fff;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.choice:hover{border-color:#BBD0E6;background:#FAFCFE}
.choice:has(input:checked){border-color:var(--orange);background:#FFF4EE;color:var(--orange-deep)}
.choice:has(input:checked) .choice__dot{border-color:var(--orange);box-shadow:inset 0 0 0 4px var(--orange)}
.choice:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:2px}

/* La case de consentement : plus grande, et l'énoncé complet reste lisible. */
.consent{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:1.1rem 1.25rem;border:2px solid var(--line);border-radius:14px;background:#FAFCFE;
  cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease);
}
.consent:hover{border-color:#BBD0E6}
.consent:has(input:checked){border-color:var(--ok);background:#F1FAF6}
.consent:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:2px}
.consent input{flex:none;width:26px;height:26px;margin:.1rem 0 0;accent-color:var(--ok);cursor:pointer}
.consent span{font-size:.97rem;line-height:1.6;color:var(--ink)}

.hint{margin:.4rem 0 0;font-size:.88rem;color:var(--muted);line-height:1.5}

/* ---------- Erreurs ---------- */
.field--err .input,.field--err .choice{border-color:var(--err)}
.err{display:block;margin-top:.4rem;font-size:.9rem;font-weight:600;color:var(--err)}

.alert{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:1rem 1.25rem;margin-bottom:1.6rem;border-radius:12px;
  font-size:1rem;line-height:1.6;
}
.alert--err{background:#FDF0ED;border:1px solid #F3C9BF;color:#8C2612}
.alert--info{background:#EEF5FD;border:1px solid #CFE0F3;color:#0B3B6E}
.alert b{display:block;margin-bottom:.15rem}

/* ---------- Le remerciement ---------- */
.merci{
  max-width:700px;margin-inline:auto;padding:clamp(1.8rem,5vw,3rem);text-align:center;
  background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);
}
.merci__mark{
  width:82px;height:82px;margin:0 auto 1.4rem;border-radius:50%;
  display:grid;place-items:center;background:#F1FAF6;
}
.merci__mark svg{width:40px;height:40px;stroke:var(--ok);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.merci h2{font-size:clamp(1.5rem,3.6vw,2.1rem)}
.merci p{margin-top:.9rem;color:var(--muted)}
.merci__recap{
  margin:1.8rem 0 0;padding:1.2rem 1.4rem;text-align:left;
  background:var(--sky);border-radius:14px;font-size:.97rem;
}
.merci__recap dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.1rem;margin:0}
.merci__recap dt{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.merci__recap dd{margin:0;color:var(--ink)}
@media (max-width:520px){
  .merci__recap dl{grid-template-columns:1fr;gap:.15rem}
  .merci__recap dd{margin-bottom:.6rem}
}

/* ===========================================================================
   PIED DE PAGE
   =========================================================================== */
.footer{background:var(--blue-deep);color:rgba(255,255,255,.72);padding:2.6rem 0 2rem;font-size:.94rem}
.footer a{color:#fff}
.footer a:hover{color:var(--orange)}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr}}
.footer h3{color:#fff;font-size:1rem;margin-bottom:.7rem}
.footer__logo{height:44px;background:#fff;border-radius:8px;padding:5px 10px;margin-bottom:1rem}
.footer__legal{
  margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.84rem;color:rgba(255,255,255,.5);line-height:1.7;
}
.footer__legal a{color:rgba(255,255,255,.8)}

/* Le QR code, pour l'équipe communication : discret, mais à portée de clic
   depuis la page elle-même plutôt que dans un courriel à retrouver. Le code,
   l'adresse qu'il encode et le bouton de téléchargement sont empilés dans cet
   ordre — c'est celui dans lequel on les lit quand on prépare une affiche. */
.qr-box{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.qr-box__img{width:150px;height:150px;background:#fff;border-radius:10px;padding:8px}
.qr-box__url{
  display:inline-block;max-width:100%;padding:.4rem .65rem;border-radius:6px;
  background:rgba(255,255,255,.1);color:#fff;font-size:.82rem;word-break:break-all;
}
/* Le bouton est un lien dans le pied de page : sans le préfixe .footer, la
   règle .footer a:hover — plus spécifique — repeindrait le libellé en orange
   sur un fond devenu orange, et le bouton paraîtrait vide au survol. */
.footer .qr-box__dl{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:42px;padding:.55rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff;text-decoration:none;
  font-size:.9rem;font-weight:600;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.footer .qr-box__dl:hover{background:var(--orange);color:#fff;transform:translateY(-1px)}

/* ===========================================================================
   PAGE DE SEUIL
   ---------------------------------------------------------------------------
   Le logo en grand et un message centré. Elle ne sert plus qu'à un cas : un
   domaine appelé qui n'est rattaché à aucun établissement (views/inconnu.php).
   =========================================================================== */
.accueil{
  min-height:calc(100vh - 260px);
  display:grid;align-items:center;
  padding:clamp(2.5rem,8vw,5rem) 0 clamp(2rem,5vw,3.5rem);
  background:
    radial-gradient(900px 460px at 50% -12%, rgba(255,123,54,.14), transparent 62%),
    linear-gradient(180deg,#fff 0%, var(--sky) 100%);
}
.accueil__inner{text-align:center;max-width:820px}

.accueil__logo{
  width:min(78vw,340px);height:auto;margin-bottom:1.6rem;
  filter:drop-shadow(0 10px 26px rgba(0,72,153,.12));
}

.accueil__titre{
  font-size:clamp(2.1rem,6.6vw,4.1rem);
  text-transform:uppercase;letter-spacing:-.03em;
}
.accueil__titre em{font-style:normal;color:var(--orange)}

.accueil__lede{
  margin:1.5rem auto 0;max-width:56ch;
  font-size:1.06rem;color:var(--muted);
}

/* ---------- Apparition au défilement ----------
   L'état masqué n'est posé que si le script a pu s'exécuter : c'est lui qui
   marque <html class="js">. Sans cette condition, un JavaScript bloqué par le
   navigateur, un pare-feu d'entreprise ou une erreur de chargement laisserait
   les illustrations invisibles pour toujours. */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  html.js .reveal.is-in{opacity:1;transform:none}
}

/* ---------- Impression : le formulaire papier reste possible ---------- */
@media print{
  .topbar,.hero__art,.cta-band,.footer,.btn,.qr-box{display:none !important}
  body{background:#fff;font-size:12pt}
  .form-card{box-shadow:none;border:1px solid #999}
  .input{border:1px solid #999}
}