/* p-accueil.css : l'accueil d'Odratta (/) et la page Mon Site par Odratta (/site/mon-site-par-odratta/).
   Accueil refait le 11/11/2026 sur la demande de Joseph : « un hero divisé en deux parties », « Odratta Studio »
   en noir et « Odratta Hosting » en bleu, « les logos qui defile en dessous, en disant plus de 300 entreprises
   accompagnés », puis « Héberger & sécuriser pour hosting et Concevoir & développer pour studio ».
   Le soir du même jour : « La photo du bureau de la page d'accueil, je la veux en fond avec noir transparent avec
   une phrase inspirante dessus. sous le hero. »
   La page tient en six blocs : les deux moitiés du héros, la photo des bureaux sous un voile noir avec la devise,
   les logos des clients sur fond noir, le studio sur une bande noire, la plateforme sur une bande bleue (même grammaire, en
   miroir), puis la société et l'appel au contact.
   Les composants partagés viennent de socle.css, site.css et studio.css (.btn, .lien-fort, .st-logos).
   Tout le contenu est visible sans JavaScript. Un seul moment de mouvement : l'arrivée du héros au chargement ;
   avec « moins de mouvement », plus rien ne bouge.
   12/11/2026, Joseph : « Enleve les robots en illustration en header sur odratta.com / met juste une illustration
   adapté dans le meme style que le reste ». Odra quitte le héros : chaque moitié porte un dessin vectoriel de la
   famille des illustrations du site (site.css § 3.5) : plan coté Odratta, fenêtre d'un site et fenêtre de code pour
   le Studio ; baie Odratta, panneau d'hébergement et pastille « Hébergé en France » pour Hosting. */

/* ---------- 1. Le héros en deux moitiés ----------
   Deux moitiés égales, bord à bord, de la hauteur de l'écran moins l'en-tête et 176 px : le haut de la photo des
   bureaux paraît dès le premier écran (1 440 × 900, 1 366 × 768) et invite à descendre. Le bord extérieur de chaque moitié s'aligne sur .conteneur : pour
   un élément de grille, 100 % vaut la largeur de sa moitié, d'où « 100 % − largeur / 2 ».
   Ordinateur (1 024 px et plus) : le logo et la devise sur toute la largeur, puis la phrase à gauche et l'illustration
   à droite, son bas aligné sur celui du bouton ; le bouton s'ancre en bas à gauche. La colonne du texte (1fr) ne descend
   jamais sous la largeur du bouton, son minimum automatique : c'est l'illustration qui rétrécit, le texte ne
   passe jamais sous le bouton. La devise, étendue sur les deux colonnes, ne pèse pas sur leur largeur.
   Tablette (768 à 1 023 px) : les deux moitiés restent côte à côte, le bouton prend toute la largeur et l'illustration
   se pose au-dessus. Téléphone : les moitiés s'empilent et l'illustration monte à côté de la devise, pour que les deux marques tiennent
   sur le premier écran (390 × 844).
   Toute la moitié est cliquable (le ::after du bouton la recouvre) ; le bouton reste le seul lien, lu une fois. */
.pac-duo {
  --pac-h: clamp(520px, calc(100svh - var(--haut-entete) - 176px), 700px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #0a0b0e;
}
@supports not (height: 100svh) {
  .pac-duo { --pac-h: clamp(520px, calc(100vh - var(--haut-entete) - 176px), 700px); }
}
.pac-moitie {
  --focus: #fff;
  /* La colonne de l'illustration (dessin en largeur, 560 × 440) ; le texte garde au moins la largeur du bouton. */
  --pac-illu: clamp(170px, 27.5vw, 420px);
  --pac-bord: clamp(40px, 4.4vw, 64px);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr minmax(0, var(--pac-illu));
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "titre titre" "texte illu" "lien illu";
  column-gap: 16px;
  min-height: var(--pac-h);
  padding-top: var(--pac-bord);
  color: #fff;
}
.pac-moitie-studio { padding-left: max(var(--marge), calc(100% - var(--largeur) / 2)); padding-right: 24px; background: #0a0b0e; }
.pac-moitie-hosting { padding-left: clamp(28px, 4vw, 64px); padding-right: max(var(--marge), calc(100% - var(--largeur) / 2)); background: #2f59ec; }

.pac-moitie-titre { grid-area: titre; margin: 0; }
/* Les deux logos tiennent dans la même boîte (celle du plus haut, Hosting et son « g ») : les deux devises partent
   de la même ligne. */
.pac-moitie-logo { display: block; width: clamp(136px, 13vw, 200px); height: auto; aspect-ratio: 480 / 197; object-fit: contain; object-position: left top; }
.pac-moitie-devise {
  display: block; margin-top: clamp(22px, 2.4vw, 34px);
  font-size: clamp(2.75rem, 0.9rem + 3.3vw, 4.5rem); font-weight: 680; line-height: 1; letter-spacing: -0.035em; white-space: nowrap;
}
.pac-moitie-texte { grid-area: texte; max-width: 30ch; margin: clamp(16px, 1.8vw, 24px) 0 0; font-size: var(--t-4); line-height: 1.45; text-wrap: pretty; }
/* 12/11/2026 : la colonne du texte n'avait que la largeur du bouton (214 px), l'image prenant tout le reste ; la phrase
   cassait sur quatre lignes (« votre mesure / depuis 2017 »). Dès 1 280 px, elle garde au moins 21vw (18,5rem au
   plus) : trois lignes pour le Studio, deux ou trois pour Hosting ; l'illustration cède un sixième de sa largeur.
   Entre 1 024 et 1 279 px, la phrase passe sur les deux colonnes et l'illustration se pose à côté du bouton. */
@media (min-width: 1280px) {
  .pac-moitie { grid-template-columns: minmax(min(21vw, 18.5rem), 1fr) minmax(0, var(--pac-illu)); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .pac-moitie { grid-template-areas: "titre titre" "texte texte" "lien illu"; }
}
.pac-moitie-studio .pac-moitie-texte { color: #c4c5cd; }
.pac-moitie-hosting .pac-moitie-texte { color: #eaf0ff; }

.pac-moitie-lien { grid-area: lien; justify-self: start; align-self: end; margin: 28px 0 var(--pac-bord); }
.pac-moitie-hosting .pac-moitie-lien { --fond: #fff; --texte: #1835b3; --fond-survol: #eaf0ff; --fond-appui: #d6e0ff; }
.pac-moitie-lien::after { content: ""; position: absolute; inset: 0; }
/* Sans transformation à l'appui : elle ferait du bouton le repère de son ::after, qui ne couvrirait plus la moitié
   au moment du clic (le sélecteur doit l'emporter sur « .btn:active:not([aria-disabled]) » de site.css). */
.pac-duo .pac-moitie-lien.btn:active { transform: none; }
.pac-moitie-lien .ic { width: 18px; height: 18px; transition: transform 200ms var(--sortie); }

/* Le dessin remplit sa zone, calé en bas à droite (preserveAspectRatio="xMaxYMax meet") ; ses ombres débordent
   dans la marge du bas. Ses éléments arrivent avec les animations communes .illu-* de site.css (§ 3.5). */
.pac-moitie-illu { grid-area: illu; position: relative; min-height: 0; margin-bottom: var(--pac-bord); pointer-events: none; transition: transform 220ms var(--sortie); }
.pac-moitie-illu svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pac-moitie-illu text { font-family: var(--police-texte); }

@media (hover: hover) and (pointer: fine) {
  .pac-moitie:hover .pac-moitie-illu { transform: translateY(-6px); }
  .pac-moitie:hover .pac-moitie-lien .ic { transform: translateX(3px); }
}

/* L'arrivée, une seule fois au chargement : le logo, la devise et la phrase montent de 12 px l'un après l'autre,
   le bouton apparaît (sans déplacement, pour la raison dite plus haut) ; les illustrations suivent leur propre
   arrivée (site.css § 3.5). */
@keyframes pac-monte { from { opacity: 0; transform: translateY(12px); } }
@keyframes pac-parait { from { opacity: 0; } }
.pac-moitie-logo, .pac-moitie-devise, .pac-moitie-texte { animation: pac-monte 600ms var(--sortie) backwards; }
.pac-moitie-devise { animation-delay: 60ms; }
.pac-moitie-texte { animation-delay: 120ms; }
.pac-moitie-lien { animation: pac-parait 500ms ease-out 200ms backwards; }

@media (max-width: 1023px) {
  .pac-moitie {
    --pac-illu: clamp(132px, 19vw, 180px);
    grid-template-columns: minmax(0, 1fr) var(--pac-illu);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "titre titre" "texte illu" "lien lien";
    column-gap: 12px;
    min-height: 0; padding-block: 36px 28px;
  }
  .pac-moitie-studio { padding-inline: var(--marge) 20px; }
  .pac-moitie-hosting { padding-inline: 20px var(--marge); }
  .pac-moitie-devise { margin-top: 20px; font-size: clamp(2.25rem, 5.4vw, 3.25rem); }
  /* Lignes équilibrées : la colonne étroite ne laisse plus « votre mesure » seul sur sa ligne. */
  .pac-moitie-texte { max-width: none; margin-top: 16px; padding-bottom: 24px; font-size: var(--t-5); text-wrap: balance; }
  .pac-moitie-lien { justify-self: stretch; margin: 0; }
  .pac-moitie-illu { margin-bottom: 20px; }
}
@media (max-width: 767px) {
  .pac-duo { grid-template-columns: minmax(0, 1fr); }
  .pac-moitie {
    --pac-illu: clamp(100px, 30vw, 136px);
    grid-template-areas: "titre illu" "texte texte" "lien lien";
    padding: 28px var(--marge) 24px;
  }
  .pac-moitie-devise { margin-top: 18px; font-size: clamp(1.75rem, 8.8vw, 2.5rem); }
  .pac-moitie-texte { margin-top: 14px; padding-bottom: 20px; }
  /* 12/11/2026 : le dessin, en largeur, tient à côté de la devise ; la phrase reprend toute la largeur. */
  .pac-moitie-illu { margin-bottom: 4px; }
}

/* ---------- 2. La photo des bureaux, sous le héros ----------
   La photo couvre toute la largeur de l'écran, sous un voile noir qui s'éclaircit vers le haut (détail plus bas). La devise de la maison se pose en bas, alignée sur le conteneur : au-dessus
   d'elle, l'enseigne odratta reste visible entre les deux fenêtres. Sous 900 px, le cadrage prévu pour le téléphone
   (780 × 536), centré sur l'enseigne. L'image est une vraie <img> (alt, AVIF et WebP, tailles adaptées) posée en
   fond, pas un background-image. */
.pac-bureaux {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(440px, 64svh, 660px);
  background: #0a0b0e; color: #fff;
}
@supports not (height: 1svh) {
  .pac-bureaux { min-height: clamp(440px, 64vh, 660px); }
}
.pac-bureaux-fond { position: absolute; inset: 0; z-index: -2; }
.pac-bureaux-fond img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
/* 12/11/2026 : le voile uniforme à 55 % éteignait la photo. Il est désormais dégressif, 70 % au pied (sous la
   devise), 16 % en haut : la pièce, les fenêtres et l'enseigne retrouvent leur lumière. Contraste mesuré sur le pixel
   le plus clair sous le texte : devise 4,6:1 au pire (1 440 px), légende 7,1:1 au pire. */
.pac-bureaux::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.7) 0%, rgb(0 0 0 / 0.42) 50%, rgb(0 0 0 / 0.16) 100%);
}
.pac-bureaux-texte { padding-block: clamp(96px, 11vw, 160px) clamp(44px, 5.5vw, 80px); }
.pac-bureaux h2 {
  max-width: 17em; margin: 0;
  font-size: clamp(2rem, 0.85rem + 3.3vw, 4.25rem); font-weight: 640; line-height: 1.05; letter-spacing: -0.03em;
  color: #fff; text-wrap: balance;
}
.pac-bureaux p { margin: clamp(18px, 2vw, 28px) 0 0; font-size: var(--t-6); line-height: 1.4; color: #d9dae0; }
@media (max-width: 899px) {
  .pac-bureaux { min-height: 480px; }
  .pac-bureaux-fond img { object-position: 50% 40%; }
}

/* ---------- 3. Les clients ----------
   Le titre porte le chiffre demandé par Joseph ; les quatre rangées de logos viennent de studio-logos.html.
   Fond noir (Joseph, 11/11/2026 : « met le fond en noir »), le même noir que la moitié Studio et la bande du studio.
   La section redéfinit les couleurs que lisent ses composants : --ardoise teinte la phrase et les logos (masques),
   --encre et --survol le bouton pause. Contrastes : blanc sur #0a0b0e = 19,6 ; #a3a4ae = 7,9 ; contour #868ca3 = 5,9. */
.pac-clients {
  --focus: #fff; --encre: #fff; --ardoise: #a3a4ae; --survol: rgb(255 255 255 / 0.08);
  padding-block: clamp(40px, 4vw, 56px) clamp(64px, 7vw, 96px);
  background: #0a0b0e; color: #fff;
}
.pac-clients-tete { margin-bottom: clamp(28px, 3vw, 40px); }
.pac-clients-titre { margin: 0; font-size: var(--t-2); }
.pac-clients-tete p { margin: 8px 0 0; font-size: var(--t-4); color: var(--ardoise); }
/* 12/11/2026 : les rangées s'effacent aux deux bords de l'écran au lieu d'y être coupées net, et le bouton pause
   rejoint la tête de section, à droite (dès 768 px), au lieu de rester seul dans une bande vide sous les logos.
   La section devient une grille d'une colonne ; .st-logos s'efface (display: contents) pour que la tête et les
   commandes partagent la première rangée. La tête réserve à droite la place du bouton le plus long (« Reprendre le
   défilement »). Le bouton reste après les logos dans le code : l'ordre de lecture ne change pas. */
.pac-clients .st-logos-rangees {
  --pac-fondu: clamp(24px, 6vw, 96px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--pac-fondu), #000 calc(100% - var(--pac-fondu)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--pac-fondu), #000 calc(100% - var(--pac-fondu)), transparent);
}
.pac-clients .st-defile-commandes { margin-top: 20px; }
@media (min-width: 768px) {
  .pac-clients { display: grid; grid-template-columns: minmax(0, 1fr); }
  .pac-clients .st-logos { display: contents; }
  .pac-clients-tete, .pac-clients .st-defile-commandes { grid-area: 1 / 1; }
  .pac-clients .st-logos-rangees { grid-row: 2; }
  .pac-clients-tete { padding-right: 15rem; }
  .pac-clients .st-defile-commandes {
    align-self: end; justify-content: flex-end;
    margin: 0 auto clamp(28px, 3vw, 40px); pointer-events: none;
  }
  .pac-clients .st-pause { pointer-events: auto; }
}

/* ---------- 4. Les deux mondes : le studio en noir, la plateforme en bleu ----------
   Même grammaire pour les deux bandes : un titre, des lignes cliquables (le nom, une phrase, la flèche) et un lien de
   fin. Le studio montre quatre sites livrés, en deux colonnes décalées ; la plateforme montre l'illustration de la
   ligne survolée ou atteinte au clavier (:has, sans JavaScript ; la première par défaut). Sous 1 024 px, tout
   s'empile : les sites passent sous les lignes et chaque ligne d'hébergement porte sa vignette, la grande scène
   disparaît. Contrastes : #a3a4ae sur #0a0b0e = 7,9 ; #e6edff sur #2f59ec = 4,8 ; blanc sur #2f59ec = 5,6. */
.pac-monde {
  --focus: #fff;
  --m-fond: #0a0b0e; --m-texte-2: #a3a4ae; --m-filet: rgb(255 255 255 / 0.14); --m-filet-fort: rgb(255 255 255 / 0.38);
  padding-block: var(--e-section);
  background: var(--m-fond); color: #fff;
}
/* Sous les clients, eux aussi sur fond noir, un filet marque le début de la bande du studio. */
.pac-clients + .pac-monde-studio { border-top: 1px solid var(--m-filet); }
.pac-monde-hosting { --m-fond: #2f59ec; --m-texte-2: #e6edff; --m-filet: rgb(255 255 255 / 0.26); --m-filet-fort: rgb(255 255 255 / 0.6); }
.pac-monde-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: center; }
.pac-monde-corps { grid-column: 1 / span 5; grid-row: 1; min-width: 0; }
.pac-vues { grid-column: 7 / -1; grid-row: 1; }
.pac-monde-hosting .pac-monde-corps { grid-column: 7 / -1; }
.pac-scene { grid-column: 1 / span 5; grid-row: 1; }

.pac-monde-titre { max-width: 17em; margin: 0 0 clamp(28px, 3vw, 40px); font-size: var(--t-2); }

.pac-rangs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--m-filet-fort); }
.pac-rangs > li { border-bottom: 1px solid var(--m-filet); }
.pac-rang {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom fleche" "desc fleche";
  column-gap: 20px; align-items: center;
  padding-block: 22px; color: #fff; text-decoration: none;
}
.pac-rang-nom { grid-area: nom; font-family: var(--police-titre); font-size: var(--t-3); font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; }
.pac-rang-desc { grid-area: desc; max-width: 48ch; margin-top: 6px; line-height: 1.5; color: var(--m-texte-2); text-wrap: pretty; }
.pac-rang .ic { grid-area: fleche; width: 22px; height: 22px; color: var(--m-texte-2); transition: transform 180ms var(--sortie), color 150ms ease; }
.pac-rang-vignette { display: none; }

/* L'offre rattachée à une ligne : son logo, tel que Joseph l'a fourni, et une phrase. */
.pac-formule {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; column-gap: 20px;
  margin-bottom: 22px; padding: 14px 18px;
  border: 1px solid var(--m-filet); border-radius: var(--r-bouton);
  color: var(--m-texte-2); font-size: var(--t-6); line-height: 1.45; text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease;
}
.pac-formule img { display: block; width: auto; height: auto; max-width: 92px; max-height: 58px; }
.pac-formule span { text-wrap: balance; }

.pac-monde-suite {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 24px;
  color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--m-filet-fort);
  text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: text-decoration-color 150ms ease;
}
.pac-monde-suite .ic { width: 18px; height: 18px; transition: transform 180ms var(--sortie); }

/* Les sites livrés : la capture réelle, sans faux navigateur ; la colonne de droite descend d'un cran. */
.pac-vues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 36px) var(--e-3); margin: 0; padding: 0; list-style: none; }
.pac-vues li:nth-child(even) { margin-top: clamp(32px, 4.4vw, 64px); }
.pac-vues a { display: block; color: #fff; text-decoration: none; }
.pac-vues picture { display: block; overflow: hidden; border-radius: var(--r-petit); background: #16171c; outline: 1px solid rgb(255 255 255 / 0.12); outline-offset: -1px; transition: outline-color 150ms ease; }
.pac-vues img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.pac-vue-legende { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 12px; font-size: var(--t-6); line-height: 1.4; }
.pac-vue-legende b { font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color 150ms ease; }
.pac-vue-legende span { color: var(--m-texte-2); }

/* La scène de la plateforme : quatre illustrations superposées, une seule visible. */
.pac-scene { position: relative; aspect-ratio: 960 / 929; }
.pac-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 180ms ease; }
.pac-scene img:first-child { opacity: 1; }
/* Au clavier, l'illustration suit la ligne qui porte le focus ; à la souris (bloc suivant), la ligne survolée,
   tant qu'aucune ligne n'a le focus : jamais deux illustrations l'une sur l'autre. */
.pac-monde-hosting:has(.pac-rangs > li:nth-child(n + 2) > .pac-rang:focus-visible) .pac-scene img:first-child { opacity: 0; }
.pac-monde-hosting:has(.pac-rangs > li:nth-child(2) > .pac-rang:focus-visible) .pac-scene img:nth-child(2),
.pac-monde-hosting:has(.pac-rangs > li:nth-child(3) > .pac-rang:focus-visible) .pac-scene img:nth-child(3),
.pac-monde-hosting:has(.pac-rangs > li:nth-child(4) > .pac-rang:focus-visible) .pac-scene img:nth-child(4) { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .pac-monde-hosting:not(:has(.pac-rang:focus-visible)):has(.pac-rangs > li:nth-child(n + 2) > .pac-rang:hover) .pac-scene img:first-child { opacity: 0; }
  .pac-monde-hosting:not(:has(.pac-rang:focus-visible)):has(.pac-rangs > li:nth-child(2) > .pac-rang:hover) .pac-scene img:nth-child(2),
  .pac-monde-hosting:not(:has(.pac-rang:focus-visible)):has(.pac-rangs > li:nth-child(3) > .pac-rang:hover) .pac-scene img:nth-child(3),
  .pac-monde-hosting:not(:has(.pac-rang:focus-visible)):has(.pac-rangs > li:nth-child(4) > .pac-rang:hover) .pac-scene img:nth-child(4) { opacity: 1; }
  .pac-rang:hover .ic { color: #fff; transform: translateX(4px); }
  .pac-formule:hover { border-color: var(--m-filet-fort); color: #fff; }
  .pac-monde-suite:hover { text-decoration-color: currentColor; }
  .pac-monde-suite:hover .ic { transform: translateX(3px); }
  .pac-vues a:hover picture { outline-color: rgb(255 255 255 / 0.5); }
  .pac-vues a:hover b { text-decoration-color: currentColor; }
}

@media (max-width: 1023px) {
  .pac-monde-grille { display: block; }
  .pac-monde-titre { max-width: 20em; }
  .pac-vues { margin-top: clamp(40px, 6vw, 56px); }
  .pac-scene { display: none; }
  .pac-monde-hosting .pac-rang { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "vignette nom fleche" "vignette desc fleche"; column-gap: 16px; }
  /* La vignette part de la ligne du nom, quelle que soit la longueur de la phrase : les quatre lignes gardent le
     même départ. */
  .pac-rang-vignette { display: block; grid-area: vignette; align-self: start; width: 64px; height: auto; }
}
@media (max-width: 559px) {
  .pac-rang { column-gap: 12px; padding-block: 20px; }
  .pac-monde-hosting .pac-rang { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 12px; }
  .pac-rang-vignette { width: 52px; }
  .pac-rang .ic { width: 20px; height: 20px; }
  .pac-formule { grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; padding: 12px 14px; }
  .pac-formule img { max-width: 72px; max-height: 46px; }
  .pac-vues { column-gap: 14px; }
  .pac-vues li:nth-child(even) { margin-top: 24px; }
  .pac-vue-legende { display: block; }
  .pac-vue-legende b, .pac-vue-legende span { display: block; }
}

/* ---------- 6. Liens forts des deux pages : la flèche du sprite, à la taille du texte ---------- */
:is(.pac-page, .pac-page-mon-site) .lien-fort .ic { display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -0.2em; }

/* ---------- 7. Mon Site par Odratta (/site/mon-site-par-odratta/) ---------- */
.pac-ms-heros h1 { max-width: none; margin: 0; line-height: 0; }
.pac-ms-heros h1 img { display: block; width: auto; height: clamp(112px, 11vw, 160px); }
.pac-ms-heros .heros-texte { margin-top: 30px; }

.pac-titre-seul { margin: 0 0 clamp(36px, 4vw, 48px); }
.pac-inclus { margin: 0; padding: 0; list-style: none; border-top: var(--trait); }
.pac-inclus li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: baseline; padding: 26px 0 28px; border-bottom: var(--trait-fin); }
.pac-inclus b { grid-column: 1 / span 5; font-family: var(--police-titre); font-size: var(--t-3); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--encre); }
.pac-inclus span { grid-column: 7 / -1; max-width: 56ch; color: var(--ardoise); }

.pac-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--e-3); margin: 0; padding: 0; list-style: none; }
.pac-etapes li { min-width: 0; padding-top: 22px; border-top: var(--trait); }
.pac-etapes b { display: block; margin-bottom: 10px; font-family: var(--police-titre); font-size: var(--t-4); font-weight: 600; line-height: 1.3; color: var(--encre); }
.pac-etape-num { display: block; margin-bottom: 14px; font-size: var(--t-2); line-height: 1; color: var(--bleu-clair); font-variant-numeric: tabular-nums; }
.pac-etapes span:not(.pac-etape-num) { display: block; font-size: var(--t-6); line-height: 1.55; color: var(--ardoise); }
.pac-suite { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 48px 0 0; }

@media (max-width: 1023px) { .pac-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .pac-inclus li { display: block; padding: 22px 0 24px; }
  .pac-inclus b { display: block; margin-bottom: 8px; }
  .pac-inclus span { display: block; }
}
@media (max-width: 559px) {
  .pac-etapes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pac-etape-num { display: inline; margin: 0 8px 0 0; font-size: var(--t-4); }
  .pac-etapes b { margin-bottom: 8px; }
}

/* ---------- 8. Moins de mouvement : plus aucune animation, transition ni décalage ---------- */
@media (prefers-reduced-motion: reduce) {
  .pac-moitie-logo, .pac-moitie-devise, .pac-moitie-texte, .pac-moitie-lien { animation: none; }
  .pac-moitie-illu, .pac-moitie-lien .ic, .pac-rang .ic, .pac-formule, .pac-monde-suite, .pac-monde-suite .ic,
  .pac-vues picture, .pac-vue-legende b, .pac-scene img { transition: none; }
  .pac-moitie:hover .pac-moitie-illu, .pac-moitie:hover .pac-moitie-lien .ic, .pac-rang:hover .ic, .pac-monde-suite:hover .ic { transform: none; }
}