/*
Theme Name: RI17
Theme URI: https://www.reparationiphone17.com/
Author: Projet SAV17 / RI17
Description: Thème sur mesure de reparationiPhone17.com. Léger, mobile d'abord, sans dépendance externe. Conserve l'identité bleue historique du site en la rendant lisible.
Version: 2.12.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ri17
*/

/* Police Nunito (SIL Open Font License, assets/fonts/OFL.txt), hébergée ici : jeu latin, polices variables.
   Une seule fonte par style couvre toutes les graisses ; l'italique ne sert qu'au logo. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("assets/fonts/nunito-latin.woff2") format("woff2");
  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: "Nunito";
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url("assets/fonts/nunito-italic-latin.woff2") format("woff2");
  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;
}

/* 2026-08-31 — portage des écarts concept C (docs/04-design-system.md §10).
   Palette principale inchangée. Détail : PROJECT/THEME-RI17.md. */

/* =========================================================================
   1. JETONS
   Palette calée sur le nouveau logo fourni le 2026-08-30 : deux couleurs,
   un marine profond et un bleu azur vif.

   Le marine du nouveau logo est nettement plus sombre que celui que j'avais
   échantillonné sur l'ancien logo (#306078) — d'où la révision.

   Contrastes sur blanc, mesurés :
     #0d2545  marine   15,4:1  -> titres, texte fort, pied de page
     #0a66c2  bleu     5,7:1   -> liens et boutons (seuil de lisibilite 4,5:1)
     #1a8cf5  azur     3,4:1   -> SIGNATURE : aplats, pictogrammes, filets.
                                  Jamais pour du texte courant sur blanc.
   ========================================================================= */
/* 2026-10-28 — STYLE SAV17 AUX COULEURS DE RI17 (décision D10, maquette validée,
   design-proposals/style-sav17/). Palette historique de RI17 (PROJECT/REFONTE-RI17.md) :
     #18a8f0  bleu signature   aplats, ornements, bouton du héros (texte nuit dessus)
     #0b6ea8  bleu action      boutons, liens, prix : 5,5:1 sur blanc
     #13263b  bleu nuit        carte héros, pied de page (l'anthracite de sav17.com)
   L'accent « framboise » du concept C disparaît : comme le rouge sur sav17.com, un seul accent,
   ici le bleu action. Arrondis et police de sav17.com (Nunito, 8 / 16 / 20 px). */
:root {
  --ri17-bleu-50:  #eaf6fe;
  --ri17-bleu-100: #d3eefc;
  --ri17-bleu-300: #7ccff7;
  --ri17-bleu-500: #18a8f0;  /* signature RI17 historique          2,7:1 — jamais en texte sur blanc */
  --ri17-bleu-700: #0b6ea8;  /* action : liens, boutons, prix      5,5:1  */
  --ri17-bleu-900: #13263b;  /* bleu nuit : titres forts, pied     15,8:1 */
  --ri17-ardoise:  #306078;  /* bleu ardoise historique (logo)       6,8:1  */

  --ri17-framboise:      #0b6ea8;  /* ancien accent du concept C, ramené sur le bleu action */
  --ri17-framboise-fonce:#095a8a;
  --ri17-framboise-pale: #eaf6fe;

  --ri17-encre: #1b2733;
  --ri17-encre-doux: #5a6673;
  --ri17-blanc:      #ffffff;
  --ri17-fond:       #f8fbfe;
  --ri17-bord:       #dfe7ee;

  --ri17-succes: #0f7a4f;
  --ri17-alerte: #8a4b00; /* = --statut-attention du design system */
  /* [nouveau] micro-état de formulaire, décision en attente — DS §1.2 */
  --ri17-statut-erreur:      #b3261e;
  --ri17-statut-erreur-pale: #fbeae9;

  --ri17-largeur:      1200px; /* écart #5 : aligné sur le concept C */
  --ri17-largeur-texte: 68ch;
  --ri17-rayon:        8px;   /* boutons, champs (sav17.com) */
  --ri17-rayon-carte:  16px;  /* cartes */
  --ri17-rayon-encart: 20px;  /* grandes cartes, héros (--s2-radius de sav17.com) */
  --ri17-ombre: 0 1px 2px rgba(16,38,59,.06), 0 8px 24px rgba(16,38,59,.06);

  --ri17-pas-1: .25rem;  --ri17-pas-2: .5rem;   --ri17-pas-3: .75rem;
  --ri17-pas-4: 1rem;    --ri17-pas-5: 1.5rem;  --ri17-pas-6: 2rem;
  --ri17-pas-7: 3rem;    --ri17-pas-8: 4.5rem;

  --ri17-police: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, "Noto Sans", sans-serif;
}

/* =========================================================================
   2. SOCLE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--ri17-police);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ri17-encre);
  background: var(--ri17-blanc);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

h1, h2, h3, h4 {
  color: var(--ri17-bleu-900);
  line-height: 1.2;
  margin: 0 0 var(--ri17-pas-4);
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 1.4rem + 1.7vw, 2.5rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.35rem, 1.2rem + .8vw, 1.75rem); margin-top: var(--ri17-pas-7); }
h3 { font-size: clamp(1.1rem, 1.05rem + .3vw, 1.25rem); margin-top: var(--ri17-pas-6); }

p, ul, ol { margin: 0 0 var(--ri17-pas-4); }
p { text-wrap: pretty; }

a { color: var(--ri17-bleu-700); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--ri17-bleu-900); }

:focus-visible {
  outline: 3px solid var(--ri17-bleu-500);
  outline-offset: 2px;
  border-radius: 3px;
}

/* =========================================================================
   3. STRUCTURE
   ========================================================================= */
.ri17-contenant { /* écart #5 : formule fluide unique, comme le concept C */
  width: min(100% - 2.5rem, var(--ri17-largeur));
  margin-inline: auto;
}

.ri17-saut {
  position: absolute; left: -9999px;
  background: var(--ri17-bleu-900); color: #fff;
  padding: var(--ri17-pas-3) var(--ri17-pas-4);
  z-index: 100; border-radius: 0 0 var(--ri17-rayon) 0;
}
.ri17-saut:focus { left: 0; top: 0; }

/* --- barre utilitaire (refonte accueil, écran 1 de la maquette) ---
   Fine, fond marine, masquée sous 900px — ce point de rupture est explicite
   dans la maquette, distinct du point de rupture de la navigation (48em). */
.ri17-barre-utilitaire {
  display: none;
  background: var(--ri17-bleu-900); color: #cfe0ee;
  font-size: .8rem;
}
.ri17-barre-utilitaire__interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ri17-pas-5);
  min-height: 34px;
}
.ri17-barre-utilitaire p { margin: 0; white-space: nowrap; }
.ri17-barre-utilitaire__centre { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.ri17-barre-utilitaire__droite a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #fff; text-decoration: none; font-weight: 600;
}
.ri17-barre-utilitaire__droite svg { width: 14px; height: 14px; stroke: #fff; }
@media (min-width: 900px) {
  .ri17-barre-utilitaire { display: block; }
}

/* --- en-tête --- */
.ri17-entete {
  background: var(--ri17-blanc);
  border-bottom: 1px solid var(--ri17-bord);
  position: sticky; top: 0; z-index: 50;
}
.ri17-entete__interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ri17-pas-4);
  min-height: 64px;
}
/* .ri17-marque / ri17_marque() (functions.php) restent définis mais ne sont
   plus appelés par header.php depuis la refonte du 2026-09-01 : voir
   .ri17-logo ci-dessous (§10, écran 1 de la maquette). Aucune règle CSS
   n'est nécessaire ici : le sélecteur n'apparaît plus dans le HTML rendu. */

/* --- logo (refonte accueil, écran 1 de la maquette) --- */
.ri17-logo { display: flex; flex-direction: column; gap: .05rem; text-decoration: none; line-height: 1.15; }
.ri17-logo__image { max-height: 40px; width: auto; }
@media (min-width: 48em) { .ri17-logo__image { max-height: 46px; } }
.ri17-logo__nom { font-weight: 800; font-size: 1.05rem; color: var(--ri17-bleu-900); letter-spacing: -.01em; }
.ri17-logo__nom b { color: var(--ri17-bleu-500); font-weight: 800; }
.ri17-logo__lieu {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ri17-encre-doux);
}

/* --- navigation --- */
.ri17-bascule {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--ri17-bord);
  border-radius: var(--ri17-rayon);
  padding: .5rem .75rem;
  min-height: 44px; /* cible tactile ≥44px (WCAG 2.5.8) */
  font: inherit; font-size: .9rem; color: var(--ri17-bleu-900);
  cursor: pointer;
}
.ri17-bascule__barres { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.ri17-bascule__barres::before, .ri17-bascule__barres::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.ri17-bascule__barres::before { top: -6px; } .ri17-bascule__barres::after { top: 6px; }

.ri17-nav ul { list-style: none; margin: 0; padding: 0; }
.ri17-nav a {
  display: block; padding: var(--ri17-pas-3) 0;
  color: var(--ri17-encre); text-decoration: none; font-weight: 500;
}
.ri17-nav a:hover, .ri17-nav .current-menu-item > a { color: var(--ri17-bleu-700); }
.ri17-nav .current-menu-item > a { font-weight: 700; }

@media (max-width: 62.499em) {   /* menu replié sous 1000 px, comme sav17.com (était 48em) */
  .ri17-nav {
    display: none;
    border-top: 1px solid var(--ri17-bord);
    padding-block: var(--ri17-pas-2);
  }
  .ri17-nav.est-ouvert { display: block; }
  .ri17-nav li + li { border-top: 1px solid var(--ri17-bord); }
  .ri17-nav .sub-menu a { padding-left: var(--ri17-pas-4); font-size: .95rem; }
}
@media (min-width: 62.5em) {
  .ri17-bascule { display: none; }
  .ri17-nav { margin-left: auto; } /* pousse nav + CTA d'en-tête à droite */
  .ri17-nav > ul { display: flex; gap: var(--ri17-pas-5); align-items: center; }
  .ri17-nav > ul > li { position: relative; }
  /* écran 1 de la maquette : intitulés de premier niveau en petites capitales */
  .ri17-nav > ul > li > a { text-transform: uppercase; font-size: .84rem; letter-spacing: .04em; font-weight: 700; }
  .ri17-nav .sub-menu {
    position: absolute; top: 100%; left: 0; min-width: 15rem;
    background: #fff; border: 1px solid var(--ri17-bord);
    border-radius: var(--ri17-rayon); box-shadow: var(--ri17-ombre);
    padding: var(--ri17-pas-2); display: none;
  }
  .ri17-nav li:hover > .sub-menu, .ri17-nav li:focus-within > .sub-menu { display: block; }
  .ri17-nav .sub-menu a { padding: var(--ri17-pas-2) var(--ri17-pas-3); border-radius: 6px; }
  .ri17-nav .sub-menu a:hover { background: var(--ri17-bleu-50); }
}
.ri17-entete__cta { text-transform: uppercase; letter-spacing: .03em; font-size: .88rem; margin-left: var(--ri17-pas-4); }

/* --- contenu --- */
.ri17-principal { padding-block: var(--ri17-pas-6) var(--ri17-pas-8); }
.ri17-article > * { max-width: var(--ri17-largeur-texte); }
.ri17-article > .alignfull, .ri17-article > .alignwide,
.ri17-article > figure, .ri17-article > table, .ri17-article > .wp-block-table { max-width: none; }

/* .ri17-fil est émis par ri17_fil_ariane() (functions.php, non modifiée).
   .ri17-fil-ariane est le nom de classe du contrat de cette mission, fourni
   pour les gabarits qui l'écriront directement dans leur propre HTML. */
/* Comme le fil d'Ariane de sav17.com (2026-10-30) : chevrons dessinés, liens discrets, page en cours en gras,
   dans la couleur d'action de RI17 et non le rouge de SAV17 (CLAUDE.md §17). */
.ri17-fil, .ri17-fil-ariane { font-size: .875rem; line-height: 1.5; color: var(--ri17-encre-doux); margin-bottom: var(--ri17-pas-4); }
.ri17-fil a, .ri17-fil-ariane a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.ri17-fil a:hover, .ri17-fil-ariane a:hover { color: var(--ri17-encre); text-decoration: underline; }
.ri17-fil a:focus-visible, .ri17-fil-ariane a:focus-visible { outline: 3px solid var(--ri17-bleu-300); outline-offset: 2px; }
.ri17-fil span[aria-hidden], .ri17-fil-ariane span[aria-hidden] { display: inline-block; box-sizing: border-box; width: 6px; height: 6px; margin: 0 6px 0 3px; vertical-align: middle; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); font-size: 0; opacity: .55; }
.ri17-fil [aria-current="page"], .ri17-fil-ariane [aria-current="page"] { color: var(--ri17-bleu-700); font-weight: 800; overflow-wrap: anywhere; }
.ri17-fil span[aria-hidden]:has(+ [aria-current="page"]), .ri17-fil-ariane span[aria-hidden]:has(+ [aria-current="page"]) { color: var(--ri17-bleu-700); opacity: 1; }

/* --- bandeau d'accueil --- */
.ri17-bandeau {
  background: linear-gradient(160deg, var(--ri17-bleu-900) 0%, var(--ri17-bleu-700) 55%, var(--ri17-bleu-500) 100%);
  color: #fff;
  padding-block: var(--ri17-pas-8);
}
.ri17-bandeau h1 { color: #fff; margin-bottom: var(--ri17-pas-3); }
.ri17-bandeau p { color: #eaf6ff; font-size: 1.1rem; max-width: 46ch; margin-bottom: var(--ri17-pas-5); }

/* --- boutons --- */
.ri17-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.25rem;
  min-height: 48px; /* écart #8 : cible tactile explicite, comme .b du concept C */
  border-radius: var(--ri17-rayon); border: 1px solid transparent;
  font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  background: var(--ri17-bleu-700); color: #fff;
  transition: background-color .15s ease;
}
.ri17-bouton:hover { background: var(--ri17-bleu-900); color: #fff; }
.ri17-bouton--clair { background: #fff; color: var(--ri17-bleu-900); }
.ri17-bouton--clair:hover { background: var(--ri17-bleu-50); color: var(--ri17-bleu-900); }
.ri17-bouton--contour, .ri17-bouton--secondaire { background: transparent; color: var(--ri17-bleu-700); border-color: var(--ri17-bleu-700); }
.ri17-bouton--contour:hover, .ri17-bouton--secondaire:hover { background: var(--ri17-bleu-50); color: var(--ri17-bleu-900); }
/* --primaire : identique au bouton par défaut, fourni pour que les gabarits
   qui suivent ce contrat de classes puissent l'écrire explicitement. */
.ri17-bouton--primaire { background: var(--ri17-bleu-700); color: #fff; }
.ri17-bouton--primaire:hover { background: var(--ri17-bleu-900); color: #fff; }

/* écart #1 : accent de conversion (= .b--p). Un seul par écran (DS §1.3.1). */
.ri17-bouton--accent { background: var(--ri17-framboise); color: #fff; border-color: transparent; }
.ri17-bouton--accent:hover { background: var(--ri17-framboise-fonce); color: #fff; }

/* état désactivé — DS §5.2 */
.ri17-bouton[disabled],
.ri17-bouton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* --- grille de cartes --- */
.ri17-grille {
  display: grid; gap: var(--ri17-pas-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-block: var(--ri17-pas-5);
  padding: 0; list-style: none;
}
.ri17-carte {
  background: #fff; border: 1px solid var(--ri17-bord);
  border-radius: var(--ri17-rayon-carte); /* écart #3 */
  padding: var(--ri17-pas-5);
  display: flex; flex-direction: column; gap: var(--ri17-pas-2);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ri17-carte:hover { border-color: var(--ri17-bleu-300); box-shadow: var(--ri17-ombre); }
/* carte vide (DS §5.6) : déjà géré en PHP (retirée du flux, pas de CSS ici) */
.ri17-carte h3 { margin: 0; font-size: 1.1rem; }
.ri17-carte h3 a { text-decoration: none; }
.ri17-carte h3 a::after { content: ""; position: absolute; inset: 0; }
.ri17-carte { position: relative; }
.ri17-carte p { margin: 0; color: var(--ri17-encre-doux); font-size: .95rem; }

/* --- tableau de tarifs --- */
.ri17-defilement { overflow-x: auto; margin-block: var(--ri17-pas-5); }
.ri17-tarifs { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 32rem; }
.ri17-tarifs caption { text-align: left; color: var(--ri17-encre-doux); padding-bottom: var(--ri17-pas-2); }
.ri17-tarifs th, .ri17-tarifs td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--ri17-bord); }
.ri17-tarifs thead th { background: var(--ri17-bleu-900); color: #fff; font-weight: 600; }
.ri17-tarifs thead th:first-child { border-radius: var(--ri17-rayon) 0 0 0; }
.ri17-tarifs thead th:last-child  { border-radius: 0 var(--ri17-rayon) 0 0; }
.ri17-tarifs tbody tr:nth-child(even) { background: var(--ri17-bleu-50); }
.ri17-tarifs td.ri17-prix {
  font-variant-numeric: tabular-nums;
  font-weight: 800; /* écart #18 */
  color: var(--ri17-bleu-900); white-space: nowrap;
}

/* =========================================================================
   ÉTATS DU CATALOGUE SAV17 — classes émises par l'extension
   ri17-sav17-data (non modifiée) : stylées ici uniquement, sans dupliquer
   sa logique (DS §5.7/5.8/5.9, écarts #12/#20).
   ========================================================================= */

/* Renforcé vs l'ancien traitement (simple italique) — écart #12. Jamais de
   rouge : état temporaire, pas une erreur bloquante. */
.ri17-indispo {
  display: block; margin: 0; padding: var(--ri17-pas-2) 0;
  color: var(--ri17-alerte); font-style: normal; font-weight: 600; font-size: .92rem;
}
/* dans une cellule de prix ou un conteneur dynamique : taille réduite */
td.ri17-prix .ri17-indispo,
.ri17-tarifs-dynamique .ri17-indispo { font-size: .82rem; padding: 0; display: inline; }

/* badge « sur devis » (span.ri17-indispo dans td.ri17-prix) : pilule, pas texte nu */
td.ri17-prix .ri17-indispo {
  display: inline-flex; align-items: center;
  padding: .15rem .6rem; border-radius: 999px;
  background: var(--ri17-fond); font-weight: 700; white-space: nowrap;
}

.ri17-squelette {
  display: block; height: 1.3em; max-width: 14rem; margin: 0;
  border-radius: 4px; background: var(--ri17-fond); color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .ri17-squelette { animation: ri17-pulse 1.2s ease-in-out infinite; }
}
@keyframes ri17-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* data-ri17-etat posé par rendu-differe.js : 'tarifs'|'vide'|'indisponible'|'erreur' */
.ri17-tarifs-dynamique { margin-block: var(--ri17-pas-4); }
.ri17-tarifs-dynamique[data-ri17-etat="erreur"] .ri17-indispo { font-weight: 700; }

.ri17-source { color: var(--ri17-encre-doux); font-size: .85rem; margin: var(--ri17-pas-2) 0 0; }

/* accordéon des modèles d'une catégorie (déclencheurs natifs aria-expanded) */
.ri17-accordeon { border: 1px solid var(--ri17-bord); border-radius: var(--ri17-rayon-carte); overflow: hidden; }
.ri17-accordeon__item + .ri17-accordeon__item { border-top: 1px solid var(--ri17-bord); }
.ri17-accordeon__titre { margin: 0; font-size: 1rem; }
.ri17-accordeon__declencheur {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ri17-pas-3);
  width: 100%; min-height: 48px;
  padding: var(--ri17-pas-3) var(--ri17-pas-4);
  border: 0; background: #fff; color: var(--ri17-bleu-900);
  font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.ri17-accordeon__declencheur:hover { background: var(--ri17-bleu-50); }
.ri17-accordeon__declencheur::after {
  content: "+"; flex: none; color: var(--ri17-bleu-700); font-weight: 700; font-size: 1.3rem; line-height: 1;
}
.ri17-accordeon__declencheur[aria-expanded="true"]::after { content: "–"; }
.ri17-accordeon__depuis { font-weight: 500; color: var(--ri17-encre-doux); font-size: .88rem; }
.ri17-accordeon__panneau { padding: 0 var(--ri17-pas-4) var(--ri17-pas-4); }
.ri17-accordeon__panneau[hidden] { display: none; }
.ri17-accordeon__panneau .ri17-defilement { margin-block: var(--ri17-pas-2) 0; }

/* --- notes --- */
.ri17-note {
  border-left: 4px solid var(--ri17-bleu-500);
  background: var(--ri17-bleu-50);
  padding: var(--ri17-pas-4);
  border-radius: 0 var(--ri17-rayon) var(--ri17-rayon) 0;
  margin-block: var(--ri17-pas-5);
}
.ri17-note > :last-child { margin-bottom: 0; }

/* --- pied de page --- */
.ri17-pied {
  background: var(--ri17-bleu-900); color: #dbe7ee;
  padding-block: var(--ri17-pas-7) var(--ri17-pas-5);
  margin-top: var(--ri17-pas-8);
}
.ri17-pied h2 { color: #fff; font-size: 1rem; margin: 0 0 var(--ri17-pas-3); text-transform: uppercase; letter-spacing: .08em; }
.ri17-pied a { color: #fff; }
.ri17-pied ul { list-style: none; padding: 0; margin: 0; }
.ri17-pied li { margin-bottom: var(--ri17-pas-2); }
.ri17-pied__colonnes {
  display: grid; gap: var(--ri17-pas-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.ri17-pied__bas {
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: var(--ri17-pas-6); padding-top: var(--ri17-pas-4);
  font-size: .875rem; color: #b9cdd9;
}

/* --- formulaires --- */
input[type=text], input[type=email], input[type=tel], input[type=search], textarea, select {
  width: 100%; max-width: 32rem;
  min-height: 48px;
  padding: .65rem .8rem;
  border: 1px solid var(--ri17-bord); border-radius: var(--ri17-rayon);
  font: inherit; color: var(--ri17-encre); background: #fff;
}
textarea { min-height: 8rem; }
/* écart #7 : halo de focus en plus du changement de bordure, comme le
   concept C (input:focus{box-shadow:0 0 0 3px rgba(26,140,245,.18)}) — un
   simple changement de couleur de bordure est moins repérable pour les
   personnes malvoyantes. */
input:focus, textarea:focus, select:focus {
  border-color: var(--ri17-bleu-500);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 140, 245, .18);
}
label { display: block; font-weight: 600; margin-bottom: var(--ri17-pas-1); color: var(--ri17-bleu-900); }

/* [nouveau] état d'erreur de champ (docs/04-design-system.md §5.4/§5.13).
   Jeton distinct de la palette de marque : jamais un bouton, jamais un CTA,
   seulement une bordure et un message de micro-état de formulaire. */
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--ri17-statut-erreur);
}
.ri17-champ-erreur {
  display: block; margin-top: var(--ri17-pas-1);
  color: var(--ri17-statut-erreur); font-size: .875rem; font-weight: 600;
}

/* Bandeaux de formulaire — succès / échec technique (docs §5.13). */
.ri17-bandeau-formulaire {
  padding: var(--ri17-pas-4); border-radius: var(--ri17-rayon);
  margin-bottom: var(--ri17-pas-4); font-weight: 600;
}
.ri17-bandeau-formulaire--succes { background: #eaf6f0; color: var(--ri17-succes); }
.ri17-bandeau-formulaire--erreur { background: var(--ri17-statut-erreur-pale); color: var(--ri17-statut-erreur); }

/* Bouton/formulaire en cours d'envoi : le seul indicateur est le libellé
   (voir functions.php) — aucune icône animée par défaut (arbitrage §11). */
[aria-busy="true"] { cursor: progress; }

/* --- utilitaires --- */
.ri17-invisible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ri17-centre { text-align: center; }

/* --- impression --- */
@media print {
  .ri17-entete, .ri17-pied, .ri17-bascule, .ri17-fil { display: none; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* =========================================================================
   9. COMPLEMENTS
   ========================================================================= */

/* Bouton fantôme, sur le bandeau sombre uniquement : le blanc sur le
   dégradé marine donne un contraste largement suffisant. */
.ri17-bouton--fantome {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.55);
}
.ri17-bouton--fantome:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.ri17-bandeau__actions { display: flex; flex-wrap: wrap; gap: var(--ri17-pas-3); margin-bottom: 0; }

/* Menu de repli, tant qu'aucun menu n'est défini dans l'administration. */
.ri17-nav__secours { list-style: none; margin: 0; padding: 0; }

/* Formulaire de recherche */
.ri17-recherche { display: flex; flex-wrap: wrap; gap: var(--ri17-pas-2); align-items: flex-end; }
.ri17-recherche label { flex: 0 0 100%; }
.ri17-recherche input[type=search] { flex: 1 1 14rem; max-width: 22rem; }
.ri17-pied .ri17-recherche label { color: #fff; font-size: .9rem; }
.ri17-pied .ri17-recherche input[type=search] { background: #fff; border-color: transparent; }

/* Pagination */
.ri17-pagination, .wp-block-query-pagination, .navigation.pagination {
  margin-block: var(--ri17-pas-6);
}
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--ri17-pas-2); }
.navigation.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; padding: .4rem .6rem;
  border: 1px solid var(--ri17-bord); border-radius: var(--ri17-rayon);
  text-decoration: none;
}
.navigation.pagination .page-numbers.current {
  background: var(--ri17-bleu-900); color: #fff; border-color: var(--ri17-bleu-900);
}

/* Blocs Gutenberg : on aligne le rendu public sur les jetons du thème. */
.wp-block-button__link { border-radius: var(--ri17-rayon); font-weight: 600; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table th { background: var(--ri17-bleu-900); color: #fff; }
.wp-block-table td, .wp-block-table th { padding: .7rem .85rem; border-bottom: 1px solid var(--ri17-bord); }
.wp-block-image img { border-radius: var(--ri17-rayon); }
.wp-block-separator { border: 0; border-top: 1px solid var(--ri17-bord); margin-block: var(--ri17-pas-6); }

/* Les tableaux de tarifs peuvent avoir beaucoup de colonnes. Sur mobile ils
   doivent defiler DANS leur cadre, jamais faire deborder la page entiere. */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { min-width: 28rem; }
.ri17-article > .wp-block-table { max-width: 100%; }

/* =========================================================================
   10. COMPOSANTS CONCEPT C — portage 2026-08-31 (docs/04-design-system.md
   §10, 20 écarts ; §5 composants/états ; §11 arbitrages performance).
   ========================================================================= */

.ri17-section { padding-block: clamp(2.5rem, 1.8rem + 4vw, 4.5rem); }
.ri17-section--pale { background: var(--ri17-fond); }
.ri17-oeil {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ri17-bleu-700); margin: 0 0 .7rem;
}
.ri17-plomb { font-size: 1.1rem; color: var(--ri17-encre-doux); max-width: 58ch; }
.ri17-grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.ri17-grille--6 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
/* --2/--3 : nombre de colonnes forcé à un point de rupture (contrat de
   classes de cette mission), plutôt que l'empaquetage auto-fit de --4/--6 —
   1 colonne par défaut, jamais de débordement à 375px. */
.ri17-grille--2 { grid-template-columns: 1fr; }
.ri17-grille--3 { grid-template-columns: 1fr; }
@media (min-width: 30em) {
  .ri17-grille--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 34em) {
  .ri17-grille--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 56em) {
  .ri17-grille--3 { grid-template-columns: repeat(3, 1fr); }
}

/* écart #9 : chercheur de modèle du héros — GET /?s=, voir ri17_rendre_chercheur() */
.ri17-chercheur {
  background: #fff; border: 1px solid var(--ri17-bord);
  border-radius: var(--ri17-rayon-encart); padding: var(--ri17-pas-5);
  box-shadow: var(--ri17-ombre); max-width: 44rem; margin-top: var(--ri17-pas-5);
}
.ri17-chercheur label { font-weight: 700; color: var(--ri17-bleu-900); margin-bottom: var(--ri17-pas-2); font-size: .95rem; }
.ri17-chercheur__champ { display: flex; gap: var(--ri17-pas-2); flex-wrap: wrap; }
.ri17-chercheur__champ input[type=search] {
  flex: 1 1 17rem; min-height: 52px; max-width: none;
  padding: .75rem 1rem; font-size: 1.05rem;
}
.ri17-chercheur .ri17-champ-erreur { flex: 0 0 100%; } /* §5.4 */

.ri17-puces { display: flex; flex-wrap: wrap; gap: var(--ri17-pas-2); margin-top: var(--ri17-pas-4); }
.ri17-puce {
  display: inline-flex; align-items: center; min-height: 44px; /* écart #6 : 44px, pas 40px */
  padding: .4rem .95rem; border-radius: 999px;
  border: 1px solid var(--ri17-bord); background: #fff; color: var(--ri17-bleu-900);
  text-decoration: none; font-size: .9rem; font-weight: 600;
}
.ri17-puce:hover { border-color: var(--ri17-bleu-500); background: var(--ri17-bleu-50); }

/* écart #14 : réassurance en ligne */
.ri17-reassur {
  display: flex; flex-wrap: wrap; gap: var(--ri17-pas-5);
  margin-top: var(--ri17-pas-5); font-size: .92rem; color: var(--ri17-encre-doux);
  list-style: none; padding: 0;
}
.ri17-reassur li { display: inline-flex; align-items: center; gap: .45rem; }
.ri17-reassur svg { width: 18px; height: 18px; stroke: var(--ri17-framboise); fill: none; stroke-width: 2.2; flex: none; }
/* .ri17-bandeau = dégradé sombre : reprend la nuance claire déjà utilisée par .ri17-bandeau p */
.ri17-bandeau .ri17-reassur { color: #eaf6ff; }

/* écart #19 : convention d'icônes (SVG inline, trait fin, sans lib) */
.ri17-icone { flex: none; fill: none; stroke-width: 2; }

/* écart #10 : grille de modèles populaires — STYLÉ, non câblé (PARTIEL, voir THEME-RI17.md) */
.ri17-modele {
  display: flex; flex-direction: column; gap: .65rem;
  background: #fff; border: 1px solid var(--ri17-bord);
  border-radius: var(--ri17-rayon-carte); padding: 1.1rem; text-align: center;
}
.ri17-modele__vignette {
  aspect-ratio: 1 / 1.1; border-radius: 10px;
  background: var(--ri17-bleu-50); display: grid; place-items: center;
}
.ri17-modele__vignette svg { width: 36%; opacity: .6; stroke: var(--ri17-bleu-700); }
.ri17-modele h3 { margin: 0; font-size: 1rem; }
.ri17-modele .ri17-prix {
  font-weight: 800; color: var(--ri17-bleu-900); font-variant-numeric: tabular-nums;
  margin: 0;
}
.ri17-modele .ri17-prix small { display: block; font-weight: 500; font-size: .76rem; color: var(--ri17-encre-doux); }
.ri17-modele .ri17-indispo { font-size: .82rem; } /* §5.7 */

/* écart #11 : cartes tarif détaillées — STYLÉ, non câblé (décision produit en attente, DS §10) */
.ri17-tarifs-cartes { display: grid; gap: var(--ri17-pas-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ri17-tarif {
  display: flex; gap: var(--ri17-pas-4); align-items: flex-start;
  background: #fff; border: 1px solid var(--ri17-bord);
  border-radius: var(--ri17-rayon-carte); padding: 1.25rem;
}
.ri17-tarif__icone {
  flex: none; width: 42px; height: 42px; border-radius: 11px;
  background: var(--ri17-bleu-50); display: grid; place-items: center;
}
.ri17-tarif__icone svg { width: 20px; height: 20px; stroke: var(--ri17-bleu-700); fill: none; stroke-width: 1.9; }
.ri17-tarif__texte { flex: 1; }
.ri17-tarif__texte strong { display: block; color: var(--ri17-bleu-900); }
.ri17-tarif__texte span { font-size: .88rem; color: var(--ri17-encre-doux); }
.ri17-tarif__montant { font-weight: 800; font-size: 1.3rem; color: var(--ri17-bleu-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ri17-tarif--phare { border-color: var(--ri17-framboise); background: var(--ri17-framboise-pale); } /* une seule par liste, §1.3.1 */
.ri17-tarif--phare .ri17-tarif__icone { background: #fff; }
.ri17-tarif--phare .ri17-tarif__icone svg { stroke: var(--ri17-framboise); }
.ri17-tarif .ri17-indispo { font-size: .8rem; }

/* écart #17 : .ri17-encart, distinct de .ri17-bandeau (bandeau héros dégradé, inchangé) */
.ri17-encart {
  background: var(--ri17-bleu-900); color: #dbe8f4;
  border-radius: var(--ri17-rayon-encart); padding: var(--ri17-pas-6);
  display: flex; gap: var(--ri17-pas-5); align-items: center;
  flex-wrap: wrap; justify-content: space-between;
}
.ri17-encart h2, .ri17-encart h3 { color: #fff; margin: 0 0 .35rem; }
.ri17-encart p { margin: 0; color: #b9cfe2; }

/* écart #15 : avis clients — jamais de faux avis nominatif, DS §5.12 */
.ri17-avis { background: #fff; border: 1px solid var(--ri17-bord); border-radius: var(--ri17-rayon-carte); padding: 1.4rem; }
.ri17-avis__note { color: var(--ri17-framboise); letter-spacing: .15em; margin: 0 0 .4rem; }
.ri17-avis blockquote { margin: 0 0 .6rem; font-size: .98rem; }
.ri17-avis cite { font-style: normal; font-size: .85rem; color: var(--ri17-encre-doux); }

/* écart #16 : FAQ en accordéon natif, zéro JavaScript.
   .ri17-faq est émis par ri17_rendre_faq() (functions.php, non modifiée).
   .ri17-accordeon-faq est le nom du contrat de cette mission, pour les
   gabarits qui écriront directement leurs propres <details>/<summary>. */
.ri17-faq details, .ri17-accordeon-faq details { border-bottom: 1px solid var(--ri17-bord); padding: var(--ri17-pas-4) 0; }
.ri17-faq details:first-child, .ri17-accordeon-faq details:first-child { border-top: 1px solid var(--ri17-bord); }
.ri17-faq summary, .ri17-accordeon-faq summary {
  cursor: pointer; font-weight: 700; color: var(--ri17-bleu-900);
  list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: var(--ri17-pas-4);
  min-height: 44px; /* cible tactile */
}
.ri17-faq summary::-webkit-details-marker, .ri17-accordeon-faq summary::-webkit-details-marker { display: none; }
.ri17-faq summary::after, .ri17-accordeon-faq summary::after { content: "+"; color: var(--ri17-bleu-700); font-weight: 700; font-size: 1.3rem; line-height: 1; flex: none; }
.ri17-faq details[open] summary::after, .ri17-accordeon-faq details[open] summary::after { content: "–"; }
.ri17-faq details > p, .ri17-accordeon-faq details > p { margin: .8rem 0 0; color: var(--ri17-encre-doux); }

/* écart #13 : barre d'action mobile sticky */
.ri17-barre {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: #fff; border-top: 1px solid var(--ri17-bord);
  box-shadow: 0 -4px 16px rgba(13, 37, 69, .08);
  padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
}
.ri17-barre__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .5rem; }
.ri17-barre a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-height: 52px; border-radius: var(--ri17-rayon);
  text-decoration: none; font-size: .78rem; font-weight: 700;
}
.ri17-barre svg { width: 19px; height: 19px; fill: none; stroke-width: 2.1; }
.ri17-barre__action { background: var(--ri17-bleu-50); color: var(--ri17-bleu-700); }
.ri17-barre__action svg { stroke: var(--ri17-bleu-700); }
.ri17-barre__action--principale { background: var(--ri17-framboise); color: #fff; } /* accent, §1.3.1 */
.ri17-barre__action--principale svg { stroke: #fff; }

@media (max-width: 47.999em) {
  .ri17-barre { display: block; }
  body { padding-bottom: 76px; } /* évite le chevauchement avec la barre sticky, §5.10 */
  .ri17-entete__cta { display: none; }
}

/* =========================================================================
   11. REFONTE ACCUEIL — planche maquette, écran 1 (mission ui-performance,
   2026-09-01). Palette conservée à l'identique (§1) : aucune nouvelle
   couleur de marque, seuls de nouveaux agencements/composants sont ajoutés.
   ========================================================================= */

/* --- héros clair : dégradé blanc → bleu très pâle (PAS le marine sombre de
   .ri17-bandeau, conservé plus haut pour d'autres usages) --- */
.ri17-heros {
  background: linear-gradient(180deg, #fff 0%, var(--ri17-bleu-50) 100%);
  padding-block: clamp(2.5rem, 1.8rem + 4vw, 5rem);
}
.ri17-heros__grille {
  display: grid; gap: var(--ri17-pas-7); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 56.25em) {
  .ri17-heros__grille { grid-template-columns: 1.05fr .95fr; }
}
.ri17-heros__soustitre { font-size: 1.1rem; color: var(--ri17-encre-doux); max-width: 46ch; margin-bottom: 0; }
.ri17-heros__accent { color: var(--ri17-bleu-500); }

/* visuel décoratif : masqué sous 900px, comme demandé par la maquette */
.ri17-heros__visuel { display: none; }
@media (min-width: 900px) {
  .ri17-heros__visuel { display: block; }
}
.ri17-heros__telephone { max-width: 215px; margin-inline: auto; filter: drop-shadow(0 20px 40px rgba(13, 37, 69, .15)); }

/* barre de recherche du héros : réutilise .ri17-recherche (contrat de
   classes), avec un habillage local en pilule + bouton loupe */
/* `flex-wrap: nowrap` et `min-width: 0` sont indispensables : sans eux, la
   largeur minimale intrinsèque du champ de recherche remplit la ligne et le
   bouton loupe bascule en dessous, au lieu de rester collé à droite comme sur
   la maquette (mesuré sur le staging le 2026-09-01 : champ 544 px = toute la
   largeur du conteneur). Le champ redevient empilable sous 480 px, plus bas. */
.ri17-recherche--heros { margin-top: var(--ri17-pas-5); max-width: 34rem; gap: 0; flex-wrap: nowrap; }
.ri17-recherche--heros input[type=search] {
  flex: 1 1 auto; max-width: none; min-width: 0; min-height: 56px;
  border-radius: var(--ri17-rayon) 0 0 var(--ri17-rayon);
  border-right: 0; font-size: 1.02rem;
}
.ri17-recherche--heros .ri17-bouton {
  border-radius: 0 var(--ri17-rayon) var(--ri17-rayon) 0;
  min-height: 56px; min-width: 56px; padding-inline: 1.1rem;
}
.ri17-recherche--heros .ri17-bouton svg { stroke: #fff; width: 20px; height: 20px; }

/* 3 réassurances en ligne, icône + titre + phrase courte */
.ri17-reassurances {
  list-style: none; margin: var(--ri17-pas-6) 0 0; padding: 0;
  display: grid; gap: var(--ri17-pas-4);
  grid-template-columns: 1fr;
}
@media (min-width: 34em) {
  .ri17-reassurances { grid-template-columns: repeat(3, 1fr); }
}
.ri17-reassurances li { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: var(--ri17-encre-doux); }
.ri17-reassurances strong { display: block; color: var(--ri17-bleu-900); font-size: .95rem; }
.ri17-reassurances svg { width: 22px; height: 22px; stroke: var(--ri17-bleu-700); margin-top: .1rem; flex: none; }

/* --- parcours en 4 étapes --- */
.ri17-etapes { background: var(--ri17-bleu-900); color: #fff; padding-block: var(--ri17-pas-6); }
.ri17-etapes__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--ri17-pas-5);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .ri17-etapes__liste { grid-template-columns: repeat(4, 1fr); gap: var(--ri17-pas-4); }
}
.ri17-etapes__item { display: flex; align-items: center; gap: var(--ri17-pas-3); position: relative; }
.ri17-etapes__item svg { width: 26px; height: 26px; stroke: #fff; flex: none; }
.ri17-etapes__item span { font-size: .92rem; font-weight: 600; }
.ri17-etapes__item span b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; margin-right: .5rem;
  border-radius: 50%; background: rgba(255, 255, 255, .16);
  font-weight: 800; font-size: .85em;
}
/* chevrons entre étapes : dessinés en CSS (pas de SVG), masqués en mobile */
@media (min-width: 48em) {
  .ri17-etapes__item:not(:last-child)::after {
    content: "";
    position: absolute; right: -1.05rem; top: 50%;
    width: 9px; height: 9px; margin-top: -6px;
    border-top: 2px solid rgba(255, 255, 255, .45);
    border-right: 2px solid rgba(255, 255, 255, .45);
    transform: rotate(45deg);
  }
}

/* --- section__titre : ligne titre + lien "voir tout" --- */
.ri17-section__titre {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--ri17-pas-3);
  margin-bottom: var(--ri17-pas-4);
}
.ri17-section__titre h2 { margin: 0; margin-top: 0; }
.ri17-section__titre a { font-weight: 700; font-size: .92rem; white-space: nowrap; }

/* --- section__duo : deux colonnes génériques (texte/visuel, listes...) --- */
.ri17-section__duo {
  display: grid; gap: var(--ri17-pas-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56em) {
  .ri17-section__duo { grid-template-columns: 1fr 1fr; gap: var(--ri17-pas-8); }
}
.ri17-section__figure { margin: 0; }
.ri17-section__figure img { border-radius: var(--ri17-rayon-carte); box-shadow: var(--ri17-ombre); width: 100%; height: auto; }

/* --- carte de modèle (famille Apple générique) --- */
.ri17-modele-carte a {
  display: flex; flex-direction: column; align-items: center; gap: var(--ri17-pas-3);
  background: #fff; border: 1px solid var(--ri17-bord);
  border-radius: var(--ri17-rayon-carte); padding: var(--ri17-pas-5) var(--ri17-pas-4);
  text-decoration: none; text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ri17-modele-carte a:hover { border-color: var(--ri17-bleu-300); box-shadow: var(--ri17-ombre); transform: translateY(-2px); }
.ri17-modele-carte a:focus-visible { transform: none; }
.ri17-modele-carte__vignette {
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: 50%; background: var(--ri17-bleu-50);
}
.ri17-modele-carte__vignette svg { width: 30px; height: 30px; stroke: var(--ri17-bleu-700); }

/* --- sous-éléments génériques d'une .ri17-carte (contrat de classes) --- */
.ri17-carte__titre { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ri17-bleu-900); }
.ri17-carte__texte { margin: 0; font-size: .92rem; color: var(--ri17-encre-doux); }

/* --- tuile carrée icône + libellé (réparations) --- */
.ri17-tuile a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ri17-pas-2);
  aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--ri17-bord);
  border-radius: var(--ri17-rayon-carte); padding: var(--ri17-pas-3);
  text-decoration: none; text-align: center; color: var(--ri17-encre);
  font-weight: 600; font-size: .85rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.ri17-tuile a:hover { border-color: var(--ri17-bleu-300); background: var(--ri17-bleu-50); }
.ri17-tuile svg { width: 26px; height: 26px; stroke: var(--ri17-bleu-700); }

/* --- bandeau de valeurs, fond marine, 4 colonnes --- */
.ri17-bandeau-valeurs { background: var(--ri17-bleu-900); color: #dbe7ee; padding-block: clamp(2.5rem, 1.8rem + 4vw, 4rem); }
.ri17-bandeau-valeurs .ri17-grille { margin-block: 0; }
.ri17-bandeau-valeurs li { text-align: center; }
.ri17-bandeau-valeurs .ri17-icone { width: 30px; height: 30px; stroke: #fff; }
.ri17-bandeau-valeurs h3 { color: #fff; margin: var(--ri17-pas-3) 0 .3rem; font-size: 1.05rem; }
.ri17-bandeau-valeurs p { margin: 0; color: #b9cfe2; font-size: .92rem; }

/* --- liste à puces avec icône (contrat de classes) --- */
.ri17-liste-lignes { list-style: none; margin: 0 0 var(--ri17-pas-5); padding: 0; display: grid; gap: var(--ri17-pas-3); }
.ri17-ligne { display: flex; align-items: flex-start; gap: .6rem; }
.ri17-ligne svg { width: 20px; height: 20px; stroke: var(--ri17-bleu-700); margin-top: .15rem; flex: none; }

/* --- bloc CTA générique (contrat de classes, non utilisé sur l'accueil,
   destiné aux autres pages — ex. tarifs, atelier) --- */
.ri17-cta-bloc {
  background: var(--ri17-bleu-900); color: #dbe8f4;
  border-radius: var(--ri17-rayon-encart); padding: var(--ri17-pas-6);
  display: flex; flex-wrap: wrap; gap: var(--ri17-pas-5);
  align-items: center; justify-content: space-between;
}
.ri17-cta-bloc h2, .ri17-cta-bloc h3 { color: #fff; margin: 0 0 .3rem; }
.ri17-cta-bloc p { margin: 0; color: #b9cfe2; }

/* --- stats (contrat de classes, non utilisé sur l'accueil : aucun chiffre
   vérifié — « 10 000+ appareils réparés », « 98% satisfaits » sont interdits
   par la mission. Prêt pour de vrais chiffres le jour où ils existeront). */
.ri17-stats {
  list-style: none; margin: 0; padding: 0; text-align: center;
  display: grid; gap: var(--ri17-pas-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}
.ri17-stats strong { display: block; font-size: clamp(1.5rem, 1.3rem + 1vw, 2.2rem); color: var(--ri17-bleu-900); }
.ri17-stats span { display: block; font-size: .85rem; color: var(--ri17-encre-doux); }

/* --- form / champ génériques (contrat de classes, pour les gabarits de
   formulaire à venir — contact, devis...) --- */
.ri17-form { max-width: 34rem; }
.ri17-champ { margin-bottom: var(--ri17-pas-4); }
.ri17-champ label { margin-bottom: .3rem; }

/* --- compléments pied de page (colonne Horaires + réseaux) --- */
.ri17-pied__reseaux { display: flex; flex-wrap: wrap; gap: var(--ri17-pas-3); margin-top: var(--ri17-pas-3); padding: 0; list-style: none; }
.ri17-pied__reseaux li { margin: 0; }
.ri17-pied address { font-style: normal; color: #dbe7ee; }
.ri17-pied address a { display: inline-block; margin-top: .3rem; }

/* =========================================================================
   12. ÉCRANS 0 & 1 — COMPLÉMENTS DE FIDÉLITÉ À LA MAQUETTE (2026-09-01)
   docs/09-maquette-specification.md §0 (chrome commun) et §1 (accueil).
   Aucune couleur de marque nouvelle : uniquement des jetons du §1, plus une
   nuance ambre réservée aux zones de RÉSERVE (elle ne doit surtout PAS se
   confondre avec la palette du site — c'est tout l'intérêt).
   ========================================================================= */

/* -------------------------------------------------------------------------
   12.1 Contenu de réserve
   Toute zone dont le contenu réel n'existe pas encore (avis, note, photo,
   article, statistique, réseaux sociaux) est rendue avec la structure exacte
   de la maquette MAIS habillée de cette classe : fond ambre très pâle, bord
   pointillé, mention « à compléter ». Sobre, mais impossible à confondre avec
   du contenu publié.
   ------------------------------------------------------------------------- */
.ri17-reserve {
  background: #fff8ea;
  border: 1px dashed #b8791c;
  border-radius: var(--ri17-rayon-carte);
  padding: var(--ri17-pas-4);
  color: var(--ri17-encre);
}
.ri17-reserve > :last-child { margin-bottom: 0; }
.ri17-reserve p { color: var(--ri17-encre-doux); font-size: .92rem; }

/* Sélecteur volontairement à deux classes : .ri17-reserve p ci-dessus est plus
   spécifique qu'une classe seule et écraserait sinon la couleur ambre. */
.ri17-reserve .ri17-reserve__mention,
p.ri17-reserve__mention {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 var(--ri17-pas-3);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ri17-alerte);
}
.ri17-reserve__mention::before {
  content: ""; flex: none;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor;
}

/* Variante sur fond marine (pied de page) : même signal, contraste inversé. */
.ri17-reserve--sombre {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .38);
}
.ri17-reserve--sombre .ri17-reserve__mention { color: #f0c375; }
.ri17-reserve--sombre p { color: #cddbe6; }

/* Variante « emplacement d'image » : garde le format de la photo manquante. */
.ri17-reserve--media {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 12rem;
}

/* -------------------------------------------------------------------------
   12.2 Étoiles
   Rangée de 5 étoiles. En l'absence de note réelle, .ri17-etoiles--vide rend
   les 5 étoiles creuses et la légende « Note à compléter » : la structure de
   la maquette est là, aucune note n'est suggérée.
   ------------------------------------------------------------------------- */
.ri17-etoiles {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .2rem .6rem;
  margin: 0 0 var(--ri17-pas-3);
}
.ri17-etoiles__rangee { display: inline-flex; align-items: center; gap: .12rem; }
.ri17-etoile svg { width: 18px; height: 18px; fill: none; stroke: #aebccb; stroke-width: 1.6; }
.ri17-etoile.est-pleine svg { fill: var(--ri17-framboise); stroke: var(--ri17-framboise); }
.ri17-etoiles__legende {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ri17-encre-doux);
}

/* -------------------------------------------------------------------------
   12.3 Avis clients (§1.6) — complète .ri17-avis défini au §10
   ------------------------------------------------------------------------- */
.ri17-avis__texte {
  margin: 0 0 var(--ri17-pas-3);
  font-size: 1rem; color: var(--ri17-encre);
  border: 0; padding: 0;
}
.ri17-avis__auteur {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem;
  margin: 0; font-size: .88rem; color: var(--ri17-encre-doux);
}
.ri17-avis__auteur cite { font-style: normal; font-weight: 700; color: var(--ri17-bleu-900); }
.ri17-avis__ville::before { content: "· "; }

/* Pastilles de pagination de la maquette. Décoratives (aria-hidden) : aucun
   carrousel n'est promis, la contrainte « zéro dépendance JS » l'interdit. */
.ri17-pastilles {
  display: flex; justify-content: center; align-items: center;
  gap: .5rem; margin-top: var(--ri17-pas-5);
}
.ri17-pastille {
  display: block; width: 9px; height: 9px;
  border-radius: 50%; background: var(--ri17-bord);
}
.ri17-pastille.est-active { background: var(--ri17-bleu-700); }

/* -------------------------------------------------------------------------
   12.4 Galerie de vignettes (contrat de classes, écrans 5 et 6)
   ------------------------------------------------------------------------- */
.ri17-galerie {
  list-style: none; margin: var(--ri17-pas-5) 0 0; padding: 0;
  display: grid; gap: var(--ri17-pas-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48em) {
  .ri17-galerie { grid-template-columns: repeat(4, 1fr); }
}
.ri17-galerie li { margin: 0; }
.ri17-galerie img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--ri17-rayon-carte);
  border: 1px solid var(--ri17-bord);
}
.ri17-galerie .ri17-reserve {
  display: flex; flex-direction: column; justify-content: center;
  aspect-ratio: 4 / 3; padding: var(--ri17-pas-3); text-align: center;
}
.ri17-galerie .ri17-reserve__mention { justify-content: center; font-size: .66rem; margin-bottom: 0; }

/* -------------------------------------------------------------------------
   12.5 Deux colonnes alignées en haut
   .ri17-section__duo centre verticalement (bon pour texte + visuel). Pour
   deux listes de hauteurs différentes — « Modèles populaires » et
   « Réparations les plus demandées » — il faut aligner les titres.
   ------------------------------------------------------------------------- */
.ri17-section__duo--haut { align-items: start; }

/* -------------------------------------------------------------------------
   12.6 En-tête : ombre légère au défilement (§0.2)
   Réalisée sans une ligne de JavaScript, via une animation pilotée par le
   défilement. Là où elle n'est pas prise en charge, l'en-tête garde son filet
   inférieur : dégradation propre, jamais de saut de mise en page.
   ------------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .ri17-entete {
      animation: ri17-ombre-entete linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 120px;
    }
    @keyframes ri17-ombre-entete {
      from { box-shadow: 0 0 0 0 rgba(13, 37, 69, 0); }
      to   { box-shadow: 0 2px 14px 0 rgba(13, 37, 69, .12); }
    }
  }
}

/* -------------------------------------------------------------------------
   12.7 Pied de page (§0.3)
   ------------------------------------------------------------------------- */
.ri17-pied__logo {
  display: flex; flex-direction: column; gap: .05rem;
  text-decoration: none; line-height: 1.15;
  margin-bottom: var(--ri17-pas-3);
}
.ri17-pied__logo .ri17-logo__nom { color: #fff; }
/* --bleu-300 et non --bleu-500 : sur le marine du pied, l'azur du logo tombe
   sous le seuil de lisibilité. Même rôle, nuance adaptée au fond. */
.ri17-pied__logo .ri17-logo__nom b { color: var(--ri17-bleu-300); }
.ri17-pied__logo .ri17-logo__lieu { color: #9db6cc; }
.ri17-pied__marque p { color: #cddbe6; font-size: .92rem; max-width: 34ch; }

/* Sous-titre de colonne (« HORAIRES » dans la colonne Atelier). */
.ri17-pied h3 {
  color: #fff; font-size: .8rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  margin: var(--ri17-pas-5) 0 var(--ri17-pas-2);
}
.ri17-pied__colonne p { color: #cddbe6; font-size: .92rem; margin: 0; }
.ri17-pied address { font-size: .92rem; color: #cddbe6; line-height: 1.7; }
/* Cible tactile : les liens du pied sont serrés, on leur donne de la hauteur. */
.ri17-pied__colonne li a,
.ri17-pied__colonne address a {
  display: inline-block; padding-block: .35rem; min-height: 24px;
}
.ri17-pied__reseaux a { display: inline-block; padding: .35rem 0; }

.ri17-pied__bas {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .35rem var(--ri17-pas-5);
}
.ri17-pied__bas p { margin: 0; }
.ri17-pied__legal a { display: inline-block; padding-block: .25rem; }
.ri17-pied__signature { display: inline-flex; align-items: center; gap: .3rem; }
.ri17-pied__signature svg { width: 14px; height: 14px; fill: #f2889f; stroke: none; }

/* -------------------------------------------------------------------------
   12.8 Garde-fous — aucun débordement horizontal à 375 px
   La barre de recherche du héros ne doit JAMAIS empiler le champ et le bouton
   loupe (§1.1) : on verrouille ici la largeur minimale intrinsèque du champ,
   qui est la seule cause de bascule.
   ------------------------------------------------------------------------- */
html, body { overflow-x: clip; }
.ri17-recherche--heros input[type=search] { min-width: 0; width: 100%; }
.ri17-recherche--heros .ri17-bouton { flex: none; }

/* =========================================================================
   COMPOSANTS « STYLE SAV17 » — 2026-10-28 (décision D10)
   Repris de la maquette validée (design-proposals/style-sav17/), elle-même calquée sur les classes
   s2-* de sav17.com. Placés en fin de feuille : ils l'emportent sur les règles du concept C.
   ========================================================================= */
body { background: var(--ri17-fond); font-family: var(--ri17-police); }
h1, h2, h3 { font-weight: 900; letter-spacing: -.5px; }

/* bandeau d'informations (le bandeau rouge de sav17.com) */
.ri17-bandeau { background: var(--ri17-bleu-700); color: #fff; font-weight: 800; font-size: 15px; text-align: center; padding: 7px 16px; }
.ri17-bandeau p { margin: 2px 0; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.ri17-bandeau svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 700px) { .ri17-bandeau { display: flex; justify-content: center; gap: 32px; } }

/* en-tête */
.ri17-entete { position: static; }
.ri17-entete__interieur { min-height: 84px; padding-block: 12px; flex-wrap: wrap; }
.ri17-logo { line-height: 1; gap: 0; }
.ri17-logo__nom { font-weight: 900; font-style: italic; font-size: 25px; line-height: 1.02; letter-spacing: -.5px; color: var(--ri17-encre); white-space: nowrap; }
.ri17-logo__nom > span { display: block; } /* deux lignes, comme le logo fourni le 2026-10-30 */
.ri17-logo__nom b { color: var(--ri17-bleu-500); font-weight: 900; }
.ri17-logo__lieu { margin-top: 5px; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 10px;
  letter-spacing: 2px; color: var(--ri17-ardoise); }
.ri17-logo__lieu::before, .ri17-logo__lieu::after { content: ""; height: 2px; flex: 1; background: var(--ri17-bleu-500); min-width: 18px; }
.ri17-logo__lieu::before { margin-right: 2px; } /* compense l'espacement après la dernière lettre : texte centré au pixel */
@media (min-width: 420px) { .ri17-logo__nom { font-size: 26px; } }
@media (min-width: 62.5em) { .ri17-logo__nom { font-size: 28px; } }
.ri17-bascule { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 12px; color: var(--ri17-bleu-700);
  background: var(--ri17-blanc); box-shadow: var(--ri17-ombre); }
.ri17-bascule__barres, .ri17-bascule__barres::before, .ri17-bascule__barres::after { width: 22px; }
.ri17-entete__actions { display: none; }
.ri17-nav { order: 5; flex-basis: 100%; }
@media (min-width: 62.5em) {
  .ri17-nav { order: 0; flex-basis: auto; }
  .ri17-nav > ul > li > a { text-transform: none; font-size: 15px; letter-spacing: 0; font-weight: 700; }
  .ri17-entete__actions { display: flex; gap: 10px; align-items: center; }
  .ri17-entete__actions .ri17-bouton { font-size: 14px; padding: 10px 16px; min-height: 0; }
  .ri17-entete__cta { text-transform: none; letter-spacing: 0; margin-left: 0; }
  .ri17-entete__tel svg { width: 16px; height: 16px; }
}
.ri17-bouton--contour { color: var(--ri17-encre); border-color: var(--ri17-bord); }

/* barre de recherche d'appareil */
.ri17-barre-recherche { background: #eef3f7; border-bottom: 1px solid var(--ri17-bord); padding: 14px 0; }
.ri17-champ-recherche { display: flex; align-items: center; gap: 8px; background: var(--ri17-blanc); border: 1px solid var(--ri17-bord);
  border-radius: 14px; padding: 6px 6px 6px 16px; box-shadow: var(--ri17-ombre); max-width: 760px; margin: 0 auto; }
.ri17-champ-recherche input[type=search] { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ri17-encre); padding: 8px 0; outline: none; }
.ri17-champ-recherche:focus-within { border-color: var(--ri17-bleu-700); box-shadow: 0 0 0 3px var(--ri17-bleu-100); }
.ri17-champ-recherche__bouton { width: 44px; height: 44px; border-radius: 10px; border: 0; background: var(--ri17-bleu-50); color: var(--ri17-bleu-700);
  display: grid; place-items: center; flex: none; cursor: pointer; }
.ri17-champ-recherche__bouton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* boutons et liens fléchés */
.ri17-bouton { border-radius: var(--ri17-rayon); font-weight: 800; }
.ri17-bouton--signature { background: var(--ri17-bleu-500); color: #08192a; border-color: transparent; }
.ri17-bouton--signature:hover { background: #7ccff7; color: #08192a; }
.ri17-bouton .ri17-icone { width: 18px; height: 18px; }
.ri17-lien-fleche { display: inline-flex; align-items: center; gap: 8px; color: var(--ri17-bleu-700); font-weight: 800; text-decoration: none; }
.ri17-lien-fleche .ri17-icone { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ri17-surtitre { margin: 0; color: var(--ri17-bleu-700); font-weight: 800; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; }

/* héros : grande carte sombre arrondie */
.ri17-principal { padding-top: 0; }
.ri17-heros-carte { margin: 22px 0 8px; background: radial-gradient(120% 120% at 100% 100%, #183048 0%, var(--ri17-bleu-900) 60%);
  color: #f3f8fc; border-radius: var(--ri17-rayon-encart); padding: 30px 28px 32px; position: relative; overflow: hidden; }
.ri17-heros-carte > :not(.ri17-heros-carte__art) { position: relative; z-index: 1; }
.ri17-heros-carte .ri17-surtitre { color: #8fd6fa; }
.ri17-heros-carte h1 { color: #f3f8fc; font-size: clamp(34px, 8.5vw, 56px); line-height: 1.08; letter-spacing: -1px; margin: 12px 0 26px; max-width: 12ch; }
.ri17-heros-carte .ri17-lien-fleche { color: #8fd6fa; margin-top: 22px; display: flex; width: max-content; }
.ri17-heros-carte__art { position: absolute; right: -110px; bottom: -130px; width: 300px; height: 300px; opacity: .45; pointer-events: none; }
@media (min-width: 800px) {
  .ri17-heros-carte { padding: 54px 56px; }
  .ri17-heros-carte__art { right: 40px; top: 50%; bottom: auto; transform: translateY(-50%); width: 340px; height: 340px; opacity: .9; }
}

/* sections de l'accueil */
.ri17-bloc { padding: 34px 0 10px; }
.ri17-bloc h2 { font-size: clamp(26px, 6vw, 36px); line-height: 1.15; margin: 10px 0 14px; color: var(--ri17-encre); }
.ri17-bloc__intro { color: var(--ri17-encre-doux); margin: 0 0 18px; max-width: 60ch; }
.ri17-bloc__titre-ligne { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; }
.ri17-picto { width: 46px; height: 46px; border-radius: 12px; background: var(--ri17-bleu-50); color: var(--ri17-bleu-700); display: grid; place-items: center; flex: none; }
.ri17-picto .ri17-icone { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ri17-appareils { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .ri17-appareils { grid-template-columns: repeat(4, 1fr); } }
.ri17-appareil { display: flex; align-items: center; gap: 14px; background: var(--ri17-blanc); border: 1px solid var(--ri17-bord);
  border-radius: var(--ri17-rayon-carte); padding: 16px; text-decoration: none; color: var(--ri17-encre); font-weight: 800; font-size: 17px;
  box-shadow: var(--ri17-ombre); position: relative; }
.ri17-appareil:hover { border-color: var(--ri17-bleu-300); }
.ri17-appareil small { display: block; font-weight: 600; font-size: 13px; color: var(--ri17-encre-doux); }
.ri17-appareil__fleche { position: absolute; right: 14px; top: 14px; color: var(--ri17-bleu-700); }
.ri17-appareil__fleche .ri17-icone { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ri17-duo { display: grid; gap: 14px; }
@media (min-width: 800px) { .ri17-duo { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.ri17-carte-bloc { background: var(--ri17-blanc); border: 1px solid var(--ri17-bord); border-radius: var(--ri17-rayon-encart); padding: 24px; box-shadow: var(--ri17-ombre); }
.ri17-carte-bloc h3 { font-size: 24px; line-height: 1.2; margin: 10px 0; color: var(--ri17-encre); }
.ri17-carte-bloc p { margin: 0 0 14px; color: var(--ri17-encre-doux); }
.ri17-carte-bloc--sombre { background: var(--ri17-bleu-900); border-color: var(--ri17-bleu-900); color: #f3f8fc; }
.ri17-carte-bloc--sombre h3 { color: #f3f8fc; }
.ri17-carte-bloc--sombre .ri17-surtitre, .ri17-carte-bloc--sombre .ri17-lien-fleche { color: #8fd6fa; }
.ri17-carte-bloc--sombre p { color: #c9d9e6; }
.ri17-atouts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ri17-atouts li { display: flex; gap: 12px; align-items: flex-start; }
.ri17-atouts .ri17-picto { width: 38px; height: 38px; border-radius: 10px; }
.ri17-atouts .ri17-picto .ri17-icone { width: 20px; height: 20px; }
.ri17-atouts b { display: block; color: var(--ri17-encre); }
.ri17-atouts span span { color: var(--ri17-encre-doux); font-size: 15px; }
.ri17-infos { display: grid; gap: 14px; }
@media (min-width: 800px) { .ri17-infos { grid-template-columns: repeat(3, 1fr); } }
.ri17-info__etiquette { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; margin: 0 0 4px !important; }
.ri17-info__valeur { font-weight: 900; font-size: 20px; color: var(--ri17-encre) !important; margin: 0 0 12px !important; }
.ri17-carte-bloc .ri17-bouton svg { width: 16px; height: 16px; }

/* pied de page : bleu nuit, comme le pied anthracite de sav17.com */
.ri17-pied { background: var(--ri17-bleu-900); margin-top: 40px; }
.ri17-pied__logo { width: fit-content; }
.ri17-pied__logo .ri17-logo__nom { color: #fff; }
.ri17-pied__logo .ri17-logo__lieu { color: #9fc3d6; }

/* Tableaux de tarifs (table.ri17-tarifs de l'extension ri17-sav17-data) rendus en CARTES, comme les
   cartes de réparation de sav17.com et de la maquette validée. Le HTML reste un vrai tableau
   (lecteurs d'écran) ; seule la présentation change. */
.ri17-defilement { overflow: visible; }
.ri17-tarifs { min-width: 0; display: block; font-size: 1rem; }
.ri17-tarifs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ri17-tarifs tbody { display: grid; gap: 12px; }
@media (min-width: 760px) { .ri17-tarifs tbody { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ri17-tarifs tbody { grid-template-columns: repeat(3, 1fr); } }
.ri17-tarifs tbody tr, .ri17-tarifs tbody tr:nth-child(even) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--ri17-blanc); border: 1px solid var(--ri17-bord); border-radius: var(--ri17-rayon-carte); padding: 16px 18px; box-shadow: var(--ri17-ombre); }
.ri17-tarifs th, .ri17-tarifs td { padding: 0; border: 0; }
.ri17-tarifs tbody th { flex-basis: 100%; font-weight: 800; font-size: 17px; line-height: 1.3; color: var(--ri17-encre);
  padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--ri17-bord); }
.ri17-tarifs tbody td:not(.ri17-prix) { font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 999px;
  background: var(--ri17-bleu-50); color: var(--ri17-bleu-700); white-space: nowrap; }
.ri17-tarifs tbody td:nth-child(2)::before { content: "Pièce "; }
.ri17-tarifs tbody td:nth-child(4)::before { content: "Garantie "; }
.ri17-tarifs tbody td:not(.ri17-prix):empty { display: none; }
.ri17-tarifs td.ri17-prix { margin-left: auto; font-size: 26px; font-weight: 900; color: var(--ri17-bleu-700); background: none; text-align: right; }
.ri17-bouton .ri17-icone, .ri17-heros-carte .ri17-icone { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ri17-tarifs caption { display: block; margin-bottom: 10px; }   /* la légende suit la table passée en bloc */
/* En-tête : avec les 7 entrées réelles du menu (D4), téléphone + devis ne tiennent pas sur la même
   ligne à 1280 px. Le téléphone passe dans le bandeau ; les actions n'apparaissent qu'à partir de 1440 px. */
.ri17-bandeau a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.ri17-bandeau a svg { width: 16px; height: 16px; }
@media (min-width: 62.5em) { .ri17-entete__actions { display: none; } .ri17-nav > ul { gap: 20px; } }
@media (min-width: 90em) { .ri17-entete__actions { display: flex; } }

/* =========================================================================
   CATALOGUE APPLE COMPLET — 2026-10-29 (décision D11) : page Tarifs (catégories + grille de tous les
   modèles avec photo SAV17) et page modèle (carte du modèle + réparations en cartes), comme sur sav17.com.
   ========================================================================= */
.ri17-page-titre { font-size: clamp(28px, 7vw, 40px); line-height: 1.15; margin: 6px 0 6px; color: var(--ri17-encre); }
.ri17-page-tarifs .ri17-fil, .ri17-page-modele .ri17-fil { margin: 18px 0 10px; }
.ri17-page-tarifs__categories { margin: 6px 0 8px; }
@media (min-width: 700px) { .ri17-page-tarifs__categories { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.ri17-page-tarifs__groupe { scroll-margin-top: 16px; }
.ri17-tuiles-modeles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .ri17-tuiles-modeles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ri17-tuiles-modeles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ri17-tuile-modele { display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; text-align: center; text-decoration: none;
  background: var(--ri17-blanc); border: 1px solid var(--ri17-bord); border-radius: var(--ri17-rayon-carte); padding: 14px 10px 16px; box-shadow: var(--ri17-ombre); }
.ri17-tuile-modele:hover { border-color: var(--ri17-bleu-300); }
.ri17-tuile-modele__photo, .ri17-fiche-modele__photo { position: relative; display: grid; place-items: center; background: var(--ri17-bleu-50);
  border-radius: 12px; overflow: hidden; color: var(--ri17-bleu-700); }
.ri17-tuile-modele__photo { width: 100%; aspect-ratio: 1; max-width: 140px; }
.ri17-tuile-modele__photo .ri17-icone, .ri17-fiche-modele__photo .ri17-icone { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .55; }
.ri17-tuile-modele__photo img, .ri17-fiche-modele__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 6px; }
.ri17-tuile-modele__nom { font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--ri17-encre); }
.ri17-fiche-modele { display: flex; gap: 18px; align-items: center; margin: 14px 0 20px; background: var(--ri17-blanc); border: 1px solid var(--ri17-bord);
  border-radius: var(--ri17-rayon-carte); padding: 16px; box-shadow: var(--ri17-ombre); max-width: 560px; }
.ri17-fiche-modele__photo { width: 96px; height: 120px; flex: none; }
.ri17-fiche-modele h2 { margin: 0; font-size: 22px; color: var(--ri17-encre); }
.ri17-fiche-modele p { margin: 2px 0 8px; color: var(--ri17-encre-doux); }
.ri17-page-modele__reparations { margin-top: 8px; }
.ri17-page-modele__reparations .ri17-defilement { margin-block: 0; }
.ri17-page-modele__reparations .ri17-tarifs caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ri17-page-modele__question { margin: 28px 0 8px; }
.ri17-page-modele__actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 14px 0 0; }
/* icône et description de la réparation, en tête de chaque carte de tarif (extension 1.2.0) */
.ri17-tarifs tbody th { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.ri17-tarif-icone { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; background: var(--ri17-bleu-50); padding: 6px; object-fit: contain; }
.ri17-tarif-nom { grid-column: 2; }
.ri17-tarif-desc { grid-column: 2; display: block; font-weight: 600; font-size: 13px; color: var(--ri17-encre-doux); }

/* Pages « catégorie » (iPhone…) — 2026-10-29, calquées sur la page « Apple iPhone » de sav17.com */
.ri17-categorie-outils { margin: 14px 0 16px; display: grid; gap: 12px; }
.ri17-categorie-outils__recherche { margin: 0; max-width: 560px; }
.ri17-categorie-outils__compte { margin: 0; color: var(--ri17-encre-doux); font-size: 14px; text-align: right; }
.ri17-puces { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.ri17-puce { flex: none; font: inherit; font-weight: 800; font-size: 15px; padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ri17-bord); background: var(--ri17-blanc); color: var(--ri17-encre); }
.ri17-puce[aria-pressed="true"] { background: var(--ri17-bleu-700); border-color: var(--ri17-bleu-700); color: #fff; }
.ri17-tuile-modele__ref { font-size: 13px; color: var(--ri17-encre-doux); margin-top: -6px; }
.ri17-categorie-aucun[hidden] { display: none; }   /* .ri17-indispo impose display:block, qui l'emporterait sur hidden */

/* Pied de page — 2026-10-29, sur le modèle de sav17.com : une colonne sur téléphone (séparée par des
   filets), cinq colonnes sur grand écran ; icônes devant les coordonnées, horaires mis en avant. */
.ri17-pied { padding: 34px 0 26px; color: #cddbe6; font-size: 15px; }
.ri17-pied__grille { display: grid; gap: 0; }
.ri17-pied__grille > * { padding: 20px 0; border-bottom: 1px solid #2a4056; }
.ri17-pied__grille > *:first-child { padding-top: 0; }
@media (min-width: 900px) {
  .ri17-pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1.1fr .9fr; gap: 28px; }
  .ri17-pied__grille > * { padding: 0; border: 0; }
}
.ri17-pied h2 { font-size: 14px; font-weight: 900; letter-spacing: .08em; margin: 0 0 12px; }
.ri17-pied__marque p { margin: 14px 0 0; max-width: 40ch; color: #cddbe6; }
.ri17-pied ul li { margin-bottom: 8px; }
.ri17-pied a { text-decoration: none; }
.ri17-pied a:hover { color: #8fd6fa; }
.ri17-pied__coord li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.ri17-pied__coord .ri17-icone { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: none; stroke: #8fd6fa; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ri17-pied__tel a { font-weight: 900; font-size: 18px; color: #fff; }
.ri17-pied__horaires p { margin: 0 0 4px; }
.ri17-pied__heures { font-weight: 900; font-size: 20px; color: #fff; }
.ri17-pied__doux { color: #9fb6c9; font-size: 14px; }
.ri17-pied__bas { border-top: 0; margin-top: 18px; padding-top: 0; display: grid; gap: 10px; font-size: 14px; }
.ri17-pied__bas p { margin: 0; }
.ri17-pied__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ri17-pied__legal a { font-weight: 800; color: #fff; }
.ri17-pied__mentions { color: #8ea6ba; font-size: 13px; line-height: 1.6; }
.ri17-pied__mentions strong { color: #fff; }

/* Page modèle à la manière de sav17.com (2026-10-29) : cartes de réparation sur une ligne (icône, nom et
   phrase courte, prix), volet « Voir les options / le détail » ; deux colonnes sur grand écran. */
.ri17-modele-layout { display: grid; gap: 16px; align-items: start; margin-bottom: 24px; }
.ri17-modele-layout > .ri17-fiche-modele, .ri17-modele-layout > .ri17-page-modele__reparations,
.ri17-modele-layout .ri17-tarifs-dynamique { margin-block: 0; }
@media (min-width: 960px) {
  .ri17-modele-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; }
  .ri17-modele-layout .ri17-fiche-modele { position: sticky; top: 16px; flex-direction: column; text-align: center; margin: 0; padding: 22px; }
  .ri17-modele-layout .ri17-fiche-modele__photo { width: 200px; height: 250px; }
}
.ri17-cartes-rep { display: grid; gap: 12px; }
.ri17-carte-rep { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "icone texte prix" "details details details";
  column-gap: 14px; align-items: center; background: var(--ri17-blanc); border: 1px solid var(--ri17-bord);
  border-radius: var(--ri17-rayon-carte); padding: 16px; box-shadow: var(--ri17-ombre); }
.ri17-carte-rep__icone { grid-area: icone; width: 52px; height: 52px; border-radius: 14px; background: var(--ri17-bleu-50); display: grid; place-items: center; overflow: hidden; }
.ri17-carte-rep__icone img { width: 40px; height: 40px; object-fit: contain; }
.ri17-carte-rep__texte { grid-area: texte; min-width: 0; }
.ri17-carte-rep__texte h3 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--ri17-encre); letter-spacing: 0; }
.ri17-carte-rep__texte p { margin: 3px 0 0; font-size: 14px; color: var(--ri17-encre-doux); }
.ri17-carte-rep__prix { grid-area: prix; text-align: right; white-space: nowrap; }
.ri17-carte-rep__prix small { display: block; font-size: 12px; color: var(--ri17-encre-doux); }
.ri17-carte-rep__prix .ri17-prix { font-size: 24px; font-weight: 900; color: var(--ri17-bleu-700); }
.ri17-carte-rep__details { grid-area: details; margin-top: 12px; border-top: 1px solid var(--ri17-bord); padding-top: 10px; }
.ri17-carte-rep__details summary { cursor: pointer; list-style: none; font-weight: 800; color: var(--ri17-bleu-700); display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.ri17-carte-rep__details summary::-webkit-details-marker { display: none; }
.ri17-carte-rep__details summary::after { content: "›"; font-size: 20px; line-height: 1; transition: transform .15s; }
.ri17-carte-rep__details[open] summary::after { transform: rotate(90deg); }
.ri17-carte-rep__details ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ri17-carte-rep__details li { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--ri17-fond); border-radius: 10px; padding: 10px 12px; }
.ri17-carte-rep__option b { display: block; font-size: 14px; color: var(--ri17-encre); }
.ri17-carte-rep__option small { font-size: 13px; color: var(--ri17-encre-doux); }
.ri17-carte-rep__details li .ri17-prix { font-weight: 900; color: var(--ri17-bleu-700); white-space: nowrap; }
.ri17-carte-rep__details p { margin: 10px 0 0; font-size: 14px; }

/* Menu à la manière de sav17.com (2026-10-29, inc/ri17-nav.php) : rubriques dépliables (Tarifs, Services,
   Nos engagements) ; sur mobile, panneau arrondi en accordéon et pied d'actions (appeler, SMS, devis). */
.ri17-nav__deplier { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: var(--ri17-pas-3) 0;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--ri17-encre); cursor: pointer; text-align: left; }
.ri17-nav__deplier:hover, .ri17-nav__rubrique.current-menu-ancestor > .ri17-nav__deplier { color: var(--ri17-bleu-700); }
.ri17-nav__chevron { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.ri17-nav__deplier[aria-expanded="true"] .ri17-nav__chevron { transform: rotate(180deg); }
.ri17-nav .current-menu-item > a { color: var(--ri17-bleu-700); }
@media (max-width: 62.499em) {
  .ri17-nav { margin: 14px 0 0; padding: 0; border: 1px solid #cddbe6; border-radius: 12px; overflow: hidden;
    background: linear-gradient(145deg, #f9fcfe 0%, #eef4f8 55%, #e2ebf2 100%); box-shadow: 0 8px 20px rgba(19, 38, 59, .10); }
  .ri17-nav li + li { border-top: 0; }
  .ri17-nav__liste > li > a, .ri17-nav__deplier { display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: 52px; padding: 0 18px; border-bottom: 1px solid #cddbe6; font-size: 15px; font-weight: 700; color: var(--ri17-encre); }
  .ri17-nav__liste > li > a:hover, .ri17-nav__deplier:hover, .ri17-nav__deplier[aria-expanded="true"] {
    background: linear-gradient(135deg, #e5f1f9, #d2e5f2); color: var(--ri17-encre); }
  .ri17-nav .sub-menu { padding: 6px 12px; background: linear-gradient(135deg, #f6fafd, #e5eef5);
    border-left: 3px solid var(--ri17-bleu-500); border-bottom: 1px solid #cddbe6; }
  .ri17-nav--js .ri17-nav__deplier[aria-expanded="false"] + .sub-menu { display: none; }
  .ri17-nav .sub-menu a { display: flex; align-items: center; min-height: 47px; padding: 10px 12px; border-radius: 8px;
    font-size: 15px; font-weight: 600; color: #2b3d50; }
  .ri17-nav .sub-menu a:hover { background: #d8e7f2; color: var(--ri17-encre); }
  .ri17-nav .sub-menu .current-menu-item > a { color: var(--ri17-bleu-700); font-weight: 800; }
  .ri17-nav__actions { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: linear-gradient(180deg, #eef4f8, #e0e9f0); }
  .ri17-nav__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ri17-nav__actions .ri17-bouton { width: 100%; min-height: 49px; padding: 10px 12px; font-size: 15px; }
  .ri17-nav__actions .ri17-bouton--contour { background: #fff; }
}
@media (min-width: 62.5em) {
  .ri17-nav__actions { display: none; }
  .ri17-nav__deplier[aria-expanded="true"] + .sub-menu { display: block; }
  .ri17-nav .sub-menu { z-index: 20; }
  .ri17-nav .sub-menu a { font-weight: 600; }
}
/* Boutons du pied de menu : « .ri17-nav a » (bloc, encre) l'emporterait sur .ri17-bouton. */
.ri17-nav__actions .ri17-bouton { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ri17-nav__actions .ri17-bouton--contour { color: var(--ri17-encre); }
.ri17-nav__actions .ri17-bouton--primaire, .ri17-nav__actions .ri17-bouton--primaire:hover { color: #fff; }
/* En-tête mobile : l'espace au-dessus du logo venait du centrage dans 84 px de hauteur minimale ; menu ouvert,
   la ligne du logo perdait ce centrage (5 px au lieu de 24). Espacement fixe : 19 px dessus et dessous. */
@media (max-width: 62.499em) {
  .ri17-entete__interieur { min-height: 0; padding-block: 19px; }
}

/* =========================================================================
   Bandeau de fermeture (2026-10-29) — fermeture ou jour férié saisi dans SAV17
   (inc/ri17-fermetures.php), au-dessus du bandeau bleu, comme sur sav17.com.
   Teinte ambre « attention » (--ri17-alerte), distincte de la palette de marque.
   ========================================================================= */
.ri17-fermeture { background: #fff4e0; border-bottom: 1px solid #f0d9a8; color: var(--ri17-alerte); }
.ri17-fermeture__interieur { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-block: 12px; text-align: center; }
.ri17-fermeture__titre { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.3; color: #6b3a00; }
.ri17-fermeture__pastille { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffe2ad; }
.ri17-fermeture__icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ri17-fermeture__lignes { list-style: none; margin: 0; padding: 0; font-size: 1.05rem; line-height: 1.45; text-wrap: balance; }
.ri17-fermeture__lignes li { margin: 0; }
.ri17-fermeture__lignes b { font-weight: 800; color: #6b3a00; }
/* Grand écran : tout sur une rangée, toujours centrée ; un texte long passe à la ligne, centré lui aussi */
@media (min-width: 62em) {
	.ri17-fermeture__interieur { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 28px; padding-block: 10px; }
	.ri17-fermeture__lignes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
}

/* =========================================================================
   Pages d'information (inc/ri17-page-info.php, 2026-10-30) — construction de
   sav17.com, couleurs de RI17 : page d'ensemble en cartes, pages de détail en blocs.
   ========================================================================= */
.ri17-info { padding-bottom: var(--ri17-pas-6); }
.ri17-info-icone { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ri17-info-tuile { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--ri17-bleu-700); font-size: 18px; box-shadow: 0 1px 3px rgba(16, 42, 67, .1); }
.ri17-info-tuile--grande { width: 64px; height: 64px; border-radius: 16px; background: var(--ri17-bleu-50); font-size: 26px; box-shadow: none; }
.ri17-info-tuile--petite { width: 36px; height: 36px; border-radius: 10px; background: var(--ri17-bleu-50); font-size: 15px; box-shadow: none; }
.ri17-info-sur { margin: 0 0 .4rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ri17-bleu-700); }
.ri17-info-texte > :first-child { margin-top: 0; }
.ri17-info-texte > :last-child { margin-bottom: 0; }
.ri17-info-texte img { max-width: 100%; height: auto; }

/* page de détail */
.ri17-info-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--ri17-bord); }
.ri17-info-tete h1 { margin: 0; }
.ri17-info-tete__chapo { margin: .4rem 0 0; color: var(--ri17-encre-doux); }
.ri17-info-grille { display: grid; gap: 1.25rem; }
.ri17-info-corps { display: grid; gap: 1rem; min-width: 0; }
.ri17-info-bloc { padding: 1.35rem; background: #fff; border: 1px solid var(--ri17-bord); border-radius: var(--ri17-rayon-carte); scroll-margin-top: 1rem; }
.ri17-info-bloc h2 { display: flex; align-items: center; gap: .7rem; margin: 0 0 .8rem; font-size: 1.25rem; line-height: 1.25; }
.ri17-info-sommaire { background: var(--ri17-fond); border: 1px solid var(--ri17-bord); border-radius: var(--ri17-rayon-carte); }
.ri17-info-sommaire summary { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.2rem; font-weight: 800; cursor: pointer; list-style: none; }
.ri17-info-sommaire summary::-webkit-details-marker { display: none; }
.ri17-info-sommaire[open] summary .ri17-info-icone { transform: rotate(180deg); }
.ri17-info-sommaire ul { list-style: none; margin: 0; padding: 0 1.2rem 1rem; }
.ri17-info-sommaire li { margin: .25rem 0; }
.ri17-info-cote { align-self: start; padding: 1rem; background: var(--ri17-fond); border: 1px solid var(--ri17-bord); border-radius: var(--ri17-rayon-carte); }
.ri17-info-cote__titre { margin: 0 0 .5rem; padding: 0 .55rem; font-weight: 800; }
.ri17-info-cote ul { list-style: none; margin: 0; padding: 0; }
.ri17-info-cote li { margin: 0; }
.ri17-info-cote a { display: flex; align-items: center; gap: .6rem; padding: .5rem .55rem; border-radius: 8px; font-size: .92rem; color: var(--ri17-encre-doux); text-decoration: none; }
.ri17-info-cote a:hover { background: var(--ri17-bleu-50); color: var(--ri17-encre); }
.ri17-info-cote a[aria-current="page"] { background: var(--ri17-bleu-50); color: var(--ri17-bleu-700); font-weight: 800; }

/* page d'ensemble */
.ri17-info-heros { padding: 1.6rem 1.4rem; border-radius: var(--ri17-rayon-carte); background: var(--ri17-bleu-900); color: #dbe7f1; }
.ri17-info-heros h1 { margin: .15rem 0 .5rem; color: #fff; }
.ri17-info-heros__sur { margin: .9rem 0 0; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ri17-bleu-300); }
.ri17-info-heros__titre { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 800; color: #fff; }
.ri17-info-heros__texte { max-width: 44rem; }
.ri17-info-heros__texte p { margin: 0; color: inherit; }
.ri17-info-heros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin: 1.2rem 0 0; }
.ri17-info-heros__lien { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ri17-bleu-300); text-decoration: none; }
.ri17-info-heros__lien:hover { color: #fff; }
.ri17-info-partie { margin-top: 2.2rem; scroll-margin-top: 1rem; }
.ri17-info-partie > h2 { margin: 0 0 1rem; }
.ri17-info-cartes { display: grid; gap: 1rem; }
.ri17-info-carte { display: flex; flex-direction: column; gap: .7rem; padding: 1.35rem; border-radius: var(--ri17-rayon-carte); background: #e9f5fd; }
.ri17-info-carte:nth-child(4n + 2) { background: #eef2f7; }
.ri17-info-carte:nth-child(4n + 3) { background: #e8f6f4; }
.ri17-info-carte:nth-child(4n + 4) { background: #f1effa; }
.ri17-info-carte:last-child:nth-child(odd) { grid-column: 1 / -1; } /* pas de trou après une dernière carte seule */
.ri17-info-carte h3 { margin: 0; font-size: 1.15rem; }
.ri17-info-carte__lien { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .2rem; font-weight: 800; color: var(--ri17-bleu-700); text-decoration: none; }
.ri17-info-carte__lien:hover { text-decoration: underline; }
.ri17-info-tuiles { display: grid; gap: .7rem; list-style: none; margin: 0; padding: 0; }
.ri17-info-tuiles li { margin: 0; }
.ri17-info-tuiles a { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; background: #fff; border: 1px solid var(--ri17-bord); border-radius: 12px; font-weight: 700; color: var(--ri17-encre); text-decoration: none; }
.ri17-info-tuiles a:hover { border-color: var(--ri17-bleu-300); color: var(--ri17-bleu-700); }
.ri17-info-tuiles .ri17-info-tuile { width: 38px; height: 38px; font-size: 15px; background: var(--ri17-bleu-50); box-shadow: none; }

/* fin de page */
.ri17-info-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; padding: 1.25rem; background: var(--ri17-bleu-50); border: 1px solid var(--ri17-bleu-300); border-radius: var(--ri17-rayon-carte); }
.ri17-info-cta__texte { flex: 1 1 14rem; }
.ri17-info-cta__texte h2 { margin: 0 0 .15rem; font-size: 1.15rem; }
.ri17-info-cta__texte p { margin: 0; color: var(--ri17-encre-doux); }
.ri17-info-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (min-width: 40em) {
	.ri17-info-cartes, .ri17-info-tuiles { grid-template-columns: repeat(2, 1fr); }
	.ri17-info-heros { padding: 2.2rem; }
	.ri17-info-bloc { padding: 1.6rem; }
}
@media (min-width: 62.5em) {
	.ri17-info-grille { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 1.6rem; }
	.ri17-info-cote { position: sticky; top: 1rem; }
	.ri17-info-tuiles { grid-template-columns: repeat(3, 1fr); }
}
@media print { .ri17-info-cote, .ri17-info-cta, .ri17-info-sommaire { display: none; } }