/* Infos pratiques — GE/GO.
   Mêmes jetons que le composant Lieux : la page doit avoir l'air d'appartenir au site,
   pas d'un gabarit importé. Une seule couleur d'accent, du blanc, et de l'air.

   Révision 1.1 (15/08/2026) — passe visuelle. Ce qui a changé, et pourquoi :
   · les quatre repères quittent la colonne de texte pour une bande pleine largeur : à
     ~520 px, quatre colonnes n'étaient pas lisibles et « Billet » tombait seul en deuxième
     ligne. Sur toute la largeur, les quatre tiennent et se lisent ;
   · les gros traits noirs sous les H2 deviennent un filet clair : une règle noire pleine
     largeur, répétée cinq fois, donnait un air de formulaire administratif ;
   · les accordéons sont resserrés (padding, rayon, interligne) — répétés vingt-cinq fois,
     quelques pixels de trop deviennent des écrans entiers de défilement ;
   · le survol d'une question ne change plus sa COULEUR. Il colorait le libellé en rouge, ce
     qui, sur une capture, se lit comme un état d'erreur permanent. Il n'éclaire plus qu'un
     fond très pâle et le chevron ;
   · la règle de lien générique passe en `:where()`, spécificité nulle. En `.ip a` (0,2,0)
     elle l'emportait sur `.ip-btn` (0,1,0) : le bouton rouge recevait du texte rouge foncé.
     C'est la cause exacte du CTA illisible. */

.ip{
  --f-encre:#0B0B0D; --f-texte:#2A2A2D; --f-doux:#5F6167;
  --f-trait:#E7E4DE; --f-filet:#EDEAE4; --f-tres-doux:#F7F6F3;
  --f-accent:#e31f24; --f-accent-fonce:#c1121c; --f-accent-nuit:#a20f18;
  --f-r:12px; --f-r-s:10px;
  max-width:1040px;margin:0 auto;padding:0 0 56px;color:var(--f-texte);
  font-size:17px;line-height:1.62;
}
.ip :where(h1,h2,h3){color:var(--f-encre);text-wrap:balance}
.ip p{margin:0 0 .85em}

/* Spécificité NULLE, volontairement : tout composant qui a sa propre couleur — un bouton,
   une puce de navigation — doit gagner sans avoir à surenchérir. */
:where(.ip-r,.ip-chapo,.ip-contact-texte) a{color:var(--f-accent-fonce);text-underline-offset:3px}
:where(.ip-r,.ip-chapo,.ip-contact-texte) a:hover{color:var(--f-accent)}
.ip :where(a,summary,button):focus-visible{
  outline:2px solid var(--f-accent);outline-offset:3px;border-radius:6px;
}

/* ------------------------------------------------------------------------- HERO
   Deux colonnes de contenu, puis une bande de repères qui traverse les deux. */
.ip-hero{padding:4px 0 0}
.ip-hero--photo{
  display:grid;gap:16px 40px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
}
.ip-eyebrow{
  margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--f-accent);
}
.ip-h1{
  margin:0 0 .3em;font-size:clamp(2.2rem,5vw,3.1rem);line-height:1.05;
  letter-spacing:-.024em;font-weight:800;
}
.ip-chapo{
  max-width:52ch;font-size:1.09rem;color:var(--f-texte);margin:0;
}

/* LA PHOTO — cadrage centré, sans artifice.
   Le fichier source est un portrait très haut (1536 × 2752). En 4/3 « cover » centré, la
   bande visible couvre les visages et l'échange du billet : aucun `object-position` de
   rattrapage n'est nécessaire, et il n'y en a donc pas. Si l'image change, on revérifie le
   cadrage — on ne le compense pas. */
.ip-hero-photo{margin:0}
.ip-hero-img{
  display:block;width:100%;height:auto;border-radius:var(--f-r);
  background:var(--f-tres-doux);
  aspect-ratio:4/3;object-fit:cover;object-position:center;
}

/* Les quatre repères : une réponse avant même d'avoir posé la question. */
.ip-faits{
  grid-column:1 / -1;
  list-style:none;display:grid;gap:10px;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.ip-faits li{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 16px;border:1px solid var(--f-trait);border-radius:var(--f-r-s);
  background:var(--f-tres-doux);
}
.ip-faits-cle{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--f-doux);
}
.ip-faits-val{font-size:15.5px;font-weight:700;color:var(--f-encre);line-height:1.3}

/* ------------------------------------------------------------------ ACCÈS RAPIDES
   La table des matières de la page : cinq rubriques, cinq entrées, rien d'autre. Pas
   d'emoji système — une puce d'accent suffit à marquer qu'il s'agit de liens. */
.ip-acces{
  display:flex;flex-wrap:wrap;gap:6px 20px;margin:32px 0 0;
  padding:13px 0;border-top:1px solid var(--f-trait);border-bottom:1px solid var(--f-trait);
}
/* Ces liens doivent se lire comme une navigation, pas comme une ligne de métadonnées :
   encre pleine plutôt que gris, soulignement toujours présent mais transparent au repos —
   il se révèle au survol sans que rien ne bouge. Zone de clic confortable, sans bouton. */
.ip-acces a{
  display:inline-flex;align-items:center;gap:9px;min-height:34px;
  color:var(--f-encre);font-size:15px;font-weight:650;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;
  text-decoration-thickness:1.5px;transition:text-decoration-color .15s ease,color .15s ease;
}
.ip-acces a::before{
  content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:var(--f-accent);opacity:.6;transition:opacity .15s ease,transform .15s ease;
}
.ip-acces a:hover,.ip-acces a:focus-visible{
  color:var(--f-accent-fonce);text-decoration-color:currentColor;
}
.ip-acces a:hover::before,.ip-acces a:focus-visible::before{opacity:1;transform:scale(1.25)}

/* --------------------------------------------------------------------- RUBRIQUES
   ANCRAGE — l'en-tête du site est `uk-sticky` et reste au-dessus du contenu : une cible
   sans déport passe DESSOUS et l'utilisateur atterrit sur un titre invisible. La valeur
   n'est pas inventée ici : c'est celle que le thème applique déjà à ses propres cibles
   (`.ddr-fiche2-seances-title`), 150 px au-dessus de 960 px, 104 px en dessous où
   l'en-tête devient le bandeau mobile. */
.ip-bloc{margin:46px 0 0;scroll-margin-top:150px}
/* Ancres des deux rubriques fusionnées : invisibles, sans hauteur, mais atteignables. */
.ip-ancre{display:block;height:0;width:0;position:relative;scroll-margin-top:150px}
.ip-h2{
  margin:0 0 12px;font-size:1.34rem;font-weight:800;letter-spacing:-.014em;
  padding-bottom:8px;border-bottom:1px solid var(--f-trait);
}
.ip-questions{display:flex;flex-direction:column;gap:6px}

/* Un vrai <details> : bouton natif, clavier natif, contenu toujours dans le DOM. */
/* Fermé : presque blanc, filet très fin — la liste doit rester calme sur 25 lignes.
   Ouvert : un fond légèrement CHAUD et une bordure un peu plus présente. La différence se
   voit sans qu'on ait besoin d'une ombre ni d'un gris lourd. */
.ip-q{
  border:1px solid var(--f-filet);border-radius:var(--f-r-s);background:#fff;
  scroll-margin-top:150px;transition:border-color .15s ease,background-color .15s ease;
}
.ip-q[open]{border-color:#DED7CB;background:#FDFCFA}
.ip-q summary{
  display:flex;align-items:flex-start;gap:14px;
  padding:11px 16px;cursor:pointer;list-style:none;
  font-size:.98rem;font-weight:600;line-height:1.45;color:var(--f-encre);
  border-radius:var(--f-r-s);
}
.ip-q[open] summary{font-weight:700}
.ip-q summary::-webkit-details-marker{display:none}
.ip-q summary::after{
  content:"";flex:0 0 auto;margin-left:auto;width:9px;height:9px;margin-top:5px;
  border-right:2px solid var(--f-doux);border-bottom:2px solid var(--f-doux);
  transform:rotate(45deg);transition:transform .18s ease,border-color .18s ease;
}
.ip-q[open] summary::after{transform:rotate(-135deg);border-color:var(--f-accent)}
/* Le survol n'est PAS un état : il n'emprunte pas la couleur d'accent au texte. */
.ip-q summary:hover{background:#FAF9F6}
.ip-q summary:hover::after{border-color:var(--f-accent)}
.ip-r{
  padding:12px 16px 14px;max-width:68ch;
  border-top:1px solid var(--f-filet);
}
.ip-r>:last-child{margin-bottom:0}
.ip-r ul,.ip-r ol{margin:0 0 .85em;padding-left:1.25em}
.ip-r li{margin:.2em 0}

/* Les trois registres d'information, distingués sans surcharge graphique. */
.ip-note{
  font-size:.94rem;color:var(--f-doux);border-left:2px solid var(--f-trait);
  padding-left:12px;
}
.ip-conseil{
  padding:10px 13px;border-radius:8px;background:#FFF6F6;border:1px solid #F0C7C9;
}
.ip-citation{
  margin-top:.9em;padding-left:14px;border-left:3px solid var(--f-accent);
  font-size:1.02rem;font-style:italic;color:var(--f-encre);
}
.ip-etapes{counter-reset:ip;list-style:none;padding-left:0}
.ip-etapes li{
  counter-increment:ip;position:relative;padding-left:32px;margin:.4em 0;
}
.ip-etapes li::before{
  content:counter(ip);position:absolute;left:0;top:.1em;
  width:22px;height:22px;border-radius:50%;background:var(--f-encre);color:#fff;
  font-size:12px;font-weight:700;display:grid;place-items:center;
}
.ip-lien-fort{font-weight:650}

/* ----------------------------------------------------------------------- CONTACT
   Hauteur dictée par le contenu : un titre, une phrase, deux boutons. */
.ip-contact{
  margin:46px 0 0;padding:24px 26px;border-radius:var(--f-r);
  background:var(--f-tres-doux);border:1px solid var(--f-trait);
}
.ip-contact-titre{margin:0 0 .25em;font-size:1.28rem;font-weight:800}
.ip-contact-texte{max-width:56ch;margin:0;color:var(--f-doux);font-size:1rem}
.ip-contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}

/* CTA — le texte blanc sur le rouge foncé donne un contraste de 5,9:1, au-delà du seuil AA
   pour du texte normal. Le rouge vif (4,9:1) passait de justesse ; il reste au survol des
   éléments décoratifs, pas sous du texte. */
.ip-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:0 22px;border-radius:999px;border:1px solid transparent;
  background:var(--f-accent-fonce);color:#fff;
  font-size:15.5px;font-weight:700;text-decoration:none;line-height:1;
}
.ip-btn:hover,.ip-btn:focus{background:var(--f-accent-nuit);color:#fff}
.ip-btn--second{background:#fff;color:var(--f-accent-fonce);border-color:#E2DED7}
.ip-btn--second:hover,.ip-btn--second:focus{background:#fff;color:var(--f-accent-nuit);border-color:#CFC9C0}

/* --------------------------------------------------------------------- RESPONSIVE */
@media (max-width:900px){
  .ip-hero--photo{grid-template-columns:1fr;gap:22px}
  .ip-faits{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:4px}
  .ip-chapo{max-width:none}
}
/* Sous 960 px, l'en-tête devient le bandeau mobile : le repli d'ancre suit, comme
   ailleurs sur le site. */
@media (max-width:959px){
  .ip-bloc,.ip-q,.ip-ancre{scroll-margin-top:104px}
}
@media (max-width:600px){
  .ip{font-size:16.5px;padding-bottom:40px}
  .ip-h1{font-size:clamp(1.9rem,8vw,2.35rem)}
  .ip-chapo{font-size:1.02rem}
  .ip-faits{gap:8px}
  .ip-faits li{padding:10px 13px}
  .ip-faits-val{font-size:14.5px}
  .ip-acces{gap:6px 16px;margin-top:26px}
  .ip-acces a{font-size:14px}
  .ip-bloc{margin-top:36px}
  .ip-h2{font-size:1.2rem}
  .ip-q summary{padding:11px 14px;font-size:.96rem}
  .ip-r{padding:11px 14px 13px}
  .ip-contact{margin-top:36px;padding:20px 18px}
  .ip-contact-actions .ip-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .ip-q summary::after,.ip-acces a::before{transition:none}
}