/* ════════════════════════════════════════════════════════════════════
   CBR-CLOUD — ACCUEIL
   Transcription de la maquette « Accueil CBR-Cloud » et du rendu de
   référence fourni. Thème CLAIR (#ffffff), accent bleu #2563eb, titres en
   Plus Jakarta Sans et texte en Inter.

   Le reste du gabarit est sombre : tout est donc scopé sous .ac, et le fond
   du gabarit est neutralisé ici comme sur /service/domaines et /service/web.
   Seuls le hero, le faux panel, le bloc d'appel final et le pied de page
   restent sombres.

   Les valeurs (tailles, rayons, ombres, teintes) sont celles de la maquette,
   cadrée à 1280px. Les écarts sont commentés à l'endroit où ils tombent.
════════════════════════════════════════════════════════════════════ */

/* ── Fond global : la page passe au clair ── */
body {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #0f172a;
}

.navigation-bar,.sticky-wrapper { z-index:9999!important; }
.header-top-area { z-index:1!important;position:relative!important; }

.ac, .ac *, .ac *::before, .ac *::after { box-sizing: border-box; }

.ac {
    font-family: 'Inter', system-ui, sans-serif;
    color: #0f172a;
    background: #ffffff;
    -webkit-font-smoothing: antialiased;

    --ink:      #0f172a;
    --muted:    #64748b;
    --muted-2:  #94a3b8;
    --line:     #e6ebf2;
    --line-2:   #eef2f7;
    --blue:     #2563eb;
    --blue-d:   #1d4ed8;
    --cyan:     #64d2ff;
    --titre:    'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

    /* La maquette est cadrée à 1280 : contenu à 1180 et gouttière de 34px.
       Aucun palier au-delà — l'élargir sur grand écran rapetisserait le faux
       panel, dessiné en pixels pour cette largeur de colonne. */
    --maxw:     1180px;
    --gout:     34px;
}
.ac a { text-decoration: none; }

/* Le gabarit pose `p`, `a` et `span { font-family: Montserrat }` dans
   z-style.css. Une famille simplement héritée de .ac ne passe JAMAIS devant une
   règle qui cible la balise, même à un seul sélecteur : sans ces trois lignes,
   tout le texte courant de la page restait en Montserrat alors que les titres
   passaient en Plus Jakarta Sans — deux polices pour un même paragraphe.

   `i` en est volontairement exclu, et `div` n'en a pas besoin : Font Awesome
   doit garder la main sur la police de ses icônes, sinon elles se changent en
   carrés, et le gabarit ne pose aucune police sur les div. */
.ac p, .ac a, .ac span { font-family: 'Inter', system-ui, sans-serif; }

/* Les titres, et les quelques valeurs qui les imitent. Les trois derniers sont
   des <span> : il leur faut deux classes pour repasser devant le `.ac span`
   ci-dessus, qui en compte une de plus qu'eux. */
.ac h1, .ac h2, .ac h3,
.ac .ac-pv2-barre-nom, .ac .ac-pv2-jaquette, .ac .ac-avis-av { font-family: var(--titre); }

.ac-wrap { max-width: var(--maxw); margin: 0 auto; }

/* Intertitre de section : le bleu quand il annonce une offre, le gris quand
   il n'annonce qu'un chapitre. C'est la distinction de la maquette.
   Le gris est en revanche celui du texte courant (#64748b) et non le #94a3b8
   de la maquette : à 10,5px, ce dernier tombait à 2,6:1 sur blanc, là où le
   minimum lisible est 4,5:1. Le nôtre tient 4,8:1 et reste franchement plus
   gris que le bleu — la distinction survit. */
.ac-lbl {
    font-size: 10.5px; font-weight: 700; letter-spacing: 2.2px;
    text-transform: uppercase; color: var(--blue); margin: 0 0 14px;
}
.ac-lbl-gris { color: var(--muted); }

.ac-h2 {
    font-size: 26px; font-weight: 800; letter-spacing: -.028em;
    line-height: 1.24; margin: 0; color: var(--ink);
}

/* Boutons — trois seuls types dans toute la page. */
.ac-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--blue); color: #fff;
    font-size: 13px; font-weight: 700;
    padding: 13px 22px; border-radius: 9px;
    box-shadow: 0 12px 26px -14px rgba(37,99,235,1);
    transition: background .18s, transform .18s;
}
.ac-btn:hover { background: var(--blue-d); color: #fff; transform: translateY(-1px); }

.ac-btn-fantome {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.18);
    color: #e2e8f0;
    font-size: 13px; font-weight: 600;
    padding: 13px 21px; border-radius: 9px;
    transition: background .18s, color .18s;
}
.ac-btn-fantome:hover { background: rgba(255,255,255,.1); color: #fff; }

.ac-lien {
    font-size: 12px; font-weight: 600; color: var(--blue);
    display: inline-flex; align-items: center; gap: 6px;
}
.ac-lien:hover { color: var(--blue-d); }

/* ════════════════════════════════════════════════════════════════════
   HERO
   L'image est un fond plein cadre, et quatre voiles la ramènent au noir
   côté texte : c'est ce montage qui rend le titre lisible par-dessus une
   photo chargée. Sans le fichier, le dégradé radial suffit — le hero ne
   dépend donc pas de l'image pour tenir debout.
════════════════════════════════════════════════════════════════════ */
.ac-hero {
    position: relative;
    background: radial-gradient(120% 130% at 78% 40%,
        #123456 0%, #0d2340 38%, #091628 72%, #070f1c 100%);
    color: #f8fafc;
    overflow: hidden;
}
.ac-hero-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    /* L'image fait 1,78 pour un hero à ~2,07 : le recadrage est donc VERTICAL, et
       il ne mange que du ciel en haut et de l'eau en bas. Le cadrage horizontal
       reste entier — c'est ce qui garde le panneau et le personnage à leur place.
       48 % plutôt que 50 : la ville et son reflet gagnent quelques pixels, le
       ciel vide en perd autant. */
    object-fit: cover; object-position: 50% 48%;
    display: block;
}
.ac-hero-voile { position: absolute; inset: 0; pointer-events: none; }
/* 1 · le voile qui porte le texte, de la gauche vers la droite. 2 · un
   assombrissement du haut, sous la barre de navigation. 3 · le coin bas-gauche,
   où retombent les repères de confiance — c'est là que l'image a son coucher de
   soleil, la partie la plus CLAIRE, et du texte de 10,5px allait s'y poser.
   4 · une bande basse, pour que l'image ne se coupe pas net.

   Les opacités ont été baissées par rapport à la version précédente (0,97 →
   0,86) : cette image est déjà sombre à gauche, et un voile presque opaque
   effaçait sa lueur bleue et le reflet de la ville dans l'eau. Assez pour le
   texte, pas assez pour éteindre la photo. */
.ac-hero-voile-1 {
    background: linear-gradient(90deg,
        rgba(4,9,18,.86) 0%, rgba(4,10,20,.8) 34%, rgba(5,12,24,.52) 52%,
        rgba(6,14,28,.2) 67%, transparent 80%);
}
.ac-hero-voile-2 { background: linear-gradient(180deg, rgba(5,10,20,.55), transparent 26%); }
.ac-hero-voile-3 {
    inset: auto auto 0 0; width: 58%; height: 62%;
    background: linear-gradient(0deg, rgba(4,9,18,.92), rgba(4,9,18,.55) 48%, transparent);
}
/* Ce voile va jusqu'à l'OPACITÉ PLEINE, et c'est ce qui rend le fondu possible :
   la dernière ligne de pixels du hero vaut alors exactement #070f1c, quelle que
   soit l'image derrière. Le dégradé qui suit peut donc partir de cette couleur
   sans risquer un liseré. À .9, la couleur d'arrivée dépendait encore de la photo. */
.ac-hero-voile-4 {
    inset: auto 0 0 0; height: 130px;
    background: linear-gradient(180deg, transparent, rgba(7,15,28,.72) 58%, #070f1c 100%);
}

.ac-hero-grille {
    position: relative;
    max-width: var(--maxw); margin: 0 auto;
    /* 116px en haut et non 78 comme la maquette : la barre de navigation du site
       est fixe et la maquette, elle, n'en a pas. Le hero a été resserré (138/74 →
       116/56) : avec la photo du panneau en fond, le bloc pesait trop lourd en
       tête de page. */
    padding: 116px var(--gout) 56px;
    display: grid;
    /* Les deux colonnes se sont rééquilibrées quand le titre est devenu « On
       héberge / vos projets numériques. » : à .86fr, la seconde ligne ne tenait
       pas et le titre partait sur trois lignes. */
    grid-template-columns: minmax(0,1fr) minmax(0,1.02fr);
    gap: 26px; align-items: center;
}
.ac-hero-texte { padding-bottom: 54px; }
/* Quand aucun visuel n'est déposé, la colonne droite ne fait que réserver la
   place de l'image de fond, pour que le texte n'aille pas se poser dessus. */
.ac-hero-place { min-height: 296px; }

/* ── Le visuel en carte ── */
.ac-hero-visuel { position: relative; min-width: 0; }
/* La lueur est SOUS la carte et non dedans : une carte en overflow:hidden rogne
   tout ce qui dépasse, halo compris. */
.ac-hero-visuel-lueur {
    position: absolute; inset: -14% -8%;
    background: radial-gradient(ellipse at 58% 44%,
        rgba(99,102,241,.34), rgba(37,99,235,.15) 46%, transparent 72%);
    filter: blur(14px);
    pointer-events: none;
}
.ac-hero-carte {
    position: relative;
    max-width: 620px; margin-left: auto;
    border-radius: 22px; overflow: hidden;
    /* Le filet clair passe par box-shadow et non par border : une bordure
       ajouterait son épaisseur à la boîte et décalerait l'image d'un pixel sous
       le rayon, ce qui se voit sur un coin arrondi. */
    box-shadow: 0 0 0 1px rgba(255,255,255,.14),
                0 44px 90px -34px rgba(2,6,23,.85),
                0 8px 24px -12px rgba(2,6,23,.5);
}
.ac-hero-carte img { display: block; width: 100%; height: auto; }

/* 41px : « vos projets numériques. » demande 469px, pour 538px de colonne — 69px
   de marge. À 47px il en fallait 538 et la ligne se coupait en trois. */
.ac-hero h1 {
    font-size: clamp(29px, 2.95vw, 41px); font-weight: 800; line-height: 1.1;
    letter-spacing: -.03em; margin: 0 0 18px; color: #f8fafc;
}

/* Le verbe qui tourne. `inline-block` est indispensable : une transformation ne
   s'applique pas à un élément en ligne, le mot ne bougerait pas d'un pixel. */
.ac-rot { color: #4da3f5; display: inline-block; }
.ac-rot-sort  { animation: ac-mot-sort .32s ease forwards; }
.ac-rot-entre { animation: ac-mot-entre .4s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes ac-mot-sort  { to   { opacity: 0; transform: translateY(-13px); } }
@keyframes ac-mot-entre { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

/* Réservé aux lecteurs d'écran : hors de l'écran mais bien dans l'arbre
   d'accessibilité, contrairement à display:none qui l'en sortirait. */
.ac-lecteur {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ac-hero-sous {
    font-size: 14.5px; line-height: 1.75; color: #a8bacd;
    margin: 0 0 22px; max-width: 430px; text-wrap: pretty;
}
.ac-hero-actions {
    display: flex; gap: 13px; align-items: center; flex-wrap: wrap;
    margin-bottom: 28px;
}
.ac-hero-actions .ac-btn { font-size: 13.5px; padding: 14px 24px; box-shadow: 0 12px 30px -12px rgba(37,99,235,1); }
.ac-hero-actions .ac-btn-fantome { font-size: 13.5px; padding: 14px 22px; }

.ac-hero-repères {
    display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
    font-size: 10.5px; font-weight: 500; color: #a7b8ca;
}
.ac-hero-repères > span { display: inline-flex; align-items: center; gap: 7px; }
.ac-hero-repères i { color: var(--cyan); font-size: 11px; }
.ac-hero-drapeau { width: 15px; height: auto; display: block; border-radius: 2px; }

/* ── Le raccord sous la photo ──
   Sans lui, l'image s'arrêtait net sur le blanc de la section suivante. Le dégradé
   descend du #070f1c où le voile du bas laisse le hero jusqu'au blanc de la page,
   en passant par les bleus du site : la photo se dissout au lieu de tomber.
   C'est le même geste qu'en bas de page, à l'envers. */
.ac-hero-fondu {
    height: 130px;
    background: linear-gradient(180deg,
        #070f1c 0%, #0b1728 18%, #16304b 38%, #2d4f68 54%,
        #6d879b 70%, #adbcc8 84%, #e2e8ed 94%, #ffffff 100%);
}

/* ════════════════════════════════════════════════════════════════════
   SOLUTIONS — quatre cartes
════════════════════════════════════════════════════════════════════ */
.ac-solutions { padding: 74px var(--gout) 78px; }
.ac-solutions .ac-lbl,
.ac-solutions .ac-h2 { text-align: center; }
.ac-solutions .ac-h2 { font-size: 31px; margin-bottom: 44px; }

.ac-cartes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }

/* La carte cesse d'être un aplat blanc posé sur du blanc. Trois choses la
   matérialisent, et c'est leur accord qui fait la différence entre une carte et
   un rectangle bordé : un dégradé qui descend d'un demi-ton vers le bleu-gris,
   un liseré blanc à l'intérieur de l'arête haute (la lumière vient du haut de la
   page), et DEUX ombres — une courte qui la pose sur le fond, une longue et très
   diffuse qui lui donne son épaisseur. Une ombre unique ne peut pas faire les
   deux : au rayon qu'il faut pour l'épaisseur, elle ne touche plus le contact.

   `isolation` ouvre un contexte d'empilement propre à la carte. Sans lui, la
   lueur du survol — posée en z-index négatif — remonterait chercher le contexte
   du document et passerait sous le fond de la page au lieu de se glisser entre
   le fond de la carte et son texte. */
.ac-carte {
    position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(180deg, #ffffff 0%, #fdfeff 58%, #f7f9fd 100%);
    border: 1px solid var(--line); border-radius: 18px;
    padding: 28px 26px 26px;
    display: flex; flex-direction: column;
    box-shadow:
        0 1px 2px rgba(15,23,42,.05),
        0 10px 24px -16px rgba(15,23,42,.18),
        inset 0 1px 0 #ffffff;
    transition: box-shadow .26s, background .26s, border-color .26s;
}
/* Un filet bleu se pose en haut de la carte au survol. Il s'ALLUME (opacité) au
   lieu de balayer de gauche à droite : rien ne se déplace au survol de ces
   cartes, c'est la lumière seule qui répond au curseur. L'opacité coûte
   exactement ce que coûtait la transformation — les deux sont composées par le
   GPU, sans recalcul de la mise en page.

   Il s'éteint à ses deux extrémités et vire au cyan de la marque : coupé net dans
   l'arrondi du coin, un filet plein se voyait comme un trait de feutre qui
   dépasse. */
.ac-carte::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
    background: linear-gradient(90deg,
        rgba(37,99,235,0), var(--blue) 24%, var(--cyan) 76%, rgba(100,210,255,0));
    opacity: 0;
    transition: opacity .26s;
}
/* La lueur du survol descend du haut de la carte — là où le filet s'allume et où
   se tient l'icône — et se dissout avant d'atteindre le paragraphe : c'est un
   éclairage, pas un fond coloré. */
.ac-carte::after {
    content: ""; position: absolute; inset: -1px -1px auto; height: 190px; z-index: -1;
    background: radial-gradient(78% 100% at 50% 0%, rgba(37,99,235,.11), rgba(37,99,235,0) 72%);
    opacity: 0; transition: opacity .3s; pointer-events: none;
}
/* LE SURVOL NE DÉPLACE RIEN. Pas de levée, pas d'agrandissement : la carte reste
   exactement où elle est, et ce sont la lumière et la couleur qui répondent —
   le fond monte au blanc pur, la bordure prend le bleu, l'ombre bleuit et
   s'approfondit. Une carte qui saute sous le curseur attire l'œil sur le
   mouvement ; immobile, elle le laisse sur ce qui est écrit dedans.

   L'ombre reste mesurée pour la même raison : une ombre longue sans levée fait
   flotter la carte au-dessus de la page sans qu'elle ait bougé — l'œil lit la
   contradiction.

   `:focus-within` double le survol : la carte porte deux liens, et l'utilisateur
   au clavier doit voir s'allumer la même carte que celui à la souris. */
.ac-carte:hover,
.ac-carte:focus-within {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #fbfdff 100%);
    border-color: rgba(37,99,235,.34);
    box-shadow:
        0 1px 2px rgba(15,23,42,.05),
        0 18px 40px -26px rgba(37,99,235,.45),
        0 6px 16px -12px rgba(15,23,42,.16),
        inset 0 1px 0 #ffffff;
}
.ac-carte:hover::before,
.ac-carte:focus-within::before { opacity: 1; }
.ac-carte:hover::after,
.ac-carte:focus-within::after { opacity: 1; }

/* UNE SEULE teinte pour les quatre cartes. Quatre couleurs différentes donnaient
   quatre familles sans lien entre elles ; le bleu de la marque les rassemble, et
   c'est l'icône qui distingue, pas la couleur.

   La pastille est éclairée du même côté que la carte : dégradé descendant, liseré
   blanc sous l'arête haute, ombre portée courte en dessous. Elle devient un objet
   posé sur la carte plutôt qu'une tache de couleur imprimée dessus. */
.ac-carte-icone {
    width: 50px; height: 50px; border-radius: 15px; flex: none;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    color: var(--blue);
    background: linear-gradient(155deg, #eff5ff, #dde8ff 58%, #d5e2ff);
    border: 1px solid rgba(37,99,235,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 12px -8px rgba(37,99,235,.55);
    transition: background .24s, color .24s, border-color .24s, box-shadow .24s;
}
.ac-carte-icone svg { width: 25px; height: 25px; display: block; }
/* Au survol, la pastille s'inverse : le bleu plein passe au fond, l'icône au
   blanc, et son ombre s'ouvre en halo. Elle non plus ne se déplace pas — c'est le
   contraste qui fait tout le travail, et il en fait largement assez. */
.ac-carte:hover .ac-carte-icone,
.ac-carte:focus-within .ac-carte-icone {
    background: linear-gradient(155deg, #3b82f6, #2563eb 55%, #1d4ed8);
    border-color: transparent; color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 12px 22px -10px rgba(37,99,235,.7);
}
.ac-carte h3 { font-size: 17px; font-weight: 800; letter-spacing: -.022em; margin: 0 0 11px; }
.ac-carte p { font-size: 12.5px; line-height: 1.75; color: var(--muted); margin: 0 0 20px; flex: 1; }

/* Le lien principal, puis la seconde entrée de la même famille. Les deux sont
   empilés et non côte à côte : dans une carte de 22px de gouttière, deux liens
   sur une ligne se coupent dès que le libellé s'allonge.

   Le filet qui les sépare du texte est celui des fiches d'avis, plus bas. Il
   donne un pied à la carte, et surtout il ALIGNE : les quatre paragraphes n'ont
   pas le même nombre de lignes, mais `flex: 1` sur le paragraphe pousse ce filet
   au même endroit dans les quatre cartes. Sans lui, rien ne montrait cet
   alignement — et c'est aussi lui qui rend visible le moindre désalignement :
   voir la note sur `.ac-lien-sec`, plus bas. */
.ac-carte-liens {
    display: flex; flex-direction: column; gap: 9px;
    border-top: 1px solid var(--line-2); padding-top: 15px;
}
/* Le lien principal fonce au survol de la CARTE, et pas seulement au survol de
   ses douze pixels de libellé : la carte entière répond au curseur, l'appel à
   l'action ne doit pas être le dernier à s'en apercevoir. La flèche, elle, reste
   en place — comme tout le reste de la carte. */
.ac-carte:hover .ac-lien,
.ac-carte:focus-within .ac-lien { color: var(--blue-d); }
/* `block` et non `inline-flex` : « + VPS SSD et HDD — prochainement » remplit
   281px des 283px utiles d'une carte sur téléphone. Deux pixels ne sont pas une
   marge — à la moindre police de substitution, le libellé se coupait. En bloc, il
   passe simplement à la ligne. */
.ac-lien-sec {
    font-size: 11.5px; font-weight: 500; color: var(--muted);
    display: block; line-height: 1.5;
    transition: color .18s;
}
.ac-lien-sec:hover { color: var(--blue); }

/* AUCUNE hauteur n'est réservée ici, et c'est le fruit d'une mesure.

   « + VPS SSD et HDD — prochainement » passait sur deux lignes dans une carte de
   243px — la largeur exacte des cartes sur écran large. Le bloc de liens étant
   collé en bas, cette seconde ligne remontait le filet de la carte Cloud de 17px :
   trois filets alignés, un quatrième plus haut. Une réserve de deux lignes posée
   sur les quatre cartes les réalignait, mais coûtait 17px de vide en pied de
   chacune.

   Le libellé est devenu « + VPS NVMe — prochainement » quand le menu Cloud est
   passé de trois entrées à une : il tient sur une ligne, comme les trois autres.
   Mesuré sans réserve : filets à la même hauteur pour les quatre cartes, et la
   rangée redescend de 364 à 347px. La réserve n'aurait plus rien à corriger.

   À rétablir si un libellé secondaire repasse sur deux lignes — le symptôme est
   un seul filet plus haut que les trois autres. */

/* ════════════════════════════════════════════════════════════════════
   PANEL
════════════════════════════════════════════════════════════════════ */
.ac-panel { padding: 12px var(--gout) 26px; }
.ac-panel-grille {
    max-width: var(--maxw); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0,.5fr) minmax(0,1fr);
    gap: 40px; align-items: center;
}
.ac-panel-grille .ac-h2 { font-size: 28px; line-height: 1.2; margin-bottom: 26px; }

.ac-checks { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.ac-checks span { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: #334155; }
.ac-checks i { color: var(--blue); font-size: 11px; flex: none; }

/* ── Le faux panel : recréation du vrai panneau V2 ──
   Décoratif au sens des lecteurs d'écran (aria-hidden dans le gabarit) : ses
   textes descendent à 6px, ils sont là pour donner la silhouette de
   l'interface, pas pour être lus. Les cinq arguments juste à gauche portent
   le sens. */
.ac-pv2 {
    background: #0b0e10; border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 34px 70px -34px rgba(8,15,26,.85);
    display: grid; grid-template-columns: 152px minmax(0,1fr);
    font-family: 'Inter', system-ui, sans-serif;
}
.ac-pv2-flanc {
    background: #0e1214; border-right: 1px solid rgba(255,255,255,.06);
    padding: 12px 11px; display: flex; flex-direction: column; gap: 12px;
    min-width: 0;
}
.ac-pv2-marque { display: flex; align-items: center; gap: 8px; }
.ac-pv2-marque img { height: 13px; width: auto; display: block; }
.ac-pv2-espace {
    font-size: 6px; font-weight: 700; letter-spacing: 1.2px; color: #5b6a79;
    line-height: 1.4; border-left: 1px solid rgba(255,255,255,.12); padding-left: 7px;
}
.ac-pv2-boite {
    display: flex; align-items: center; gap: 8px;
    background: #14181b; border: 1px solid rgba(255,255,255,.06);
    border-radius: 9px; padding: 8px 9px; min-width: 0;
}
.ac-pv2-av {
    width: 20px; height: 20px; border-radius: 50%;
    background: #1f2a33; color: #7f8ea0;
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; flex: none;
}
.ac-pv2-nom { font-size: 8.5px; font-weight: 700; color: #e6edf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-pv2-role { font-size: 7px; color: #5b6a79; margin-top: 1px; }
.ac-pv2-retour {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid rgba(255,255,255,.07); border-radius: 9px;
    padding: 7px 9px; font-size: 8.5px; color: #9aa7b4;
}
.ac-pv2-vignette {
    width: 26px; height: 19px; border-radius: 5px; flex: 0 0 26px;
    background-color: #101b26; background-size: cover; background-position: center;
}

/* Le pied de la barre latérale : « Site » et « Quitter », comme dans le panel.
   `margin-top:auto` le colle en bas quelle que soit la hauteur du bloc. */
.ac-pv2-flanc-pied { margin-top: auto; display: flex; gap: 6px; padding-top: 8px; }
.ac-pv2-flanc-pied > span {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    border-radius: 8px; padding: 7px 6px; font-size: 7.5px; font-weight: 700;
}
.ac-pv2-flanc-pied i { font-size: 7px; }
.ac-pv2-site    { background: #14181b; border: 1px solid rgba(255,255,255,.07); color: #9aa7b4; }
.ac-pv2-quitter { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.32); color: #f87171; }
.ac-pv2-cle { font-size: 6px; letter-spacing: 1px; color: #5b6a79; }
.ac-pv2-val { font-size: 8.5px; font-weight: 700; color: #e6edf3; }
.ac-pv2-pastille { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; display: block; flex: none; }
.ac-pv2-titre-groupe {
    display: flex; align-items: center; gap: 7px;
    font-size: 6.5px; font-weight: 700; letter-spacing: 1.2px; color: #5b6a79; padding-left: 2px;
}
.ac-pv2-titre-groupe i { color: #1e9df1; font-size: 8px; }
.ac-pv2-menu { display: flex; flex-direction: column; gap: 2px; }
.ac-pv2-menu span {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 9px; border-radius: 7px;
    color: #9aa7b4; font-size: 8.5px; font-weight: 500;
}
.ac-pv2-menu span i { font-size: 8px; width: 10px; opacity: .75; flex: none; }
.ac-pv2-menu .ac-pv2-actif { background: #1e9df1; color: #fff; font-weight: 700; }
.ac-pv2-menu .ac-pv2-actif i { opacity: 1; }

.ac-pv2-corps { min-width: 0; background: #0b0e10; }
.ac-pv2-barre {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 13px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.ac-pv2-barre-nom { font-family: var(--titre); font-size: 11px; font-weight: 700; color: #e6edf3; }
.ac-pv2-recherche {
    margin-left: auto; display: flex; align-items: center; gap: 7px;
    background: #14181b; border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px; padding: 5px 11px; font-size: 7.5px; color: #5b6a79; min-width: 140px;
}
.ac-pv2-cloche { position: relative; color: #9aa7b4; font-size: 9px; }
.ac-pv2-cloche b {
    position: absolute; top: -4px; right: -5px;
    background: #ef4444; color: #fff; font-size: 5.5px; font-weight: 700;
    border-radius: 20px; padding: 1px 3px;
}
.ac-pv2-rond { width: 18px; height: 18px; border-radius: 50%; background: #1f2a33; display: block; flex: none; }

.ac-pv2-contenu { padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; }

/* ── Carte d'en-tête du serveur ──
   La jaquette du jeu en fond, presque éteinte par le voile : dans le panel,
   c'est elle qui donne son identité à la carte. Le logo, lui, reste net. */
.ac-pv2-serveur {
    position: relative;
    background-color: #101315; background-size: cover; background-position: center;
    border: 1px solid rgba(255,255,255,.06); border-radius: 11px;
    padding: 12px 13px; display: flex; align-items: center; flex-wrap: wrap;
    gap: 11px 13px; overflow: hidden;
}
.ac-pv2-serveur::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10,14,16,.94) 0%, rgba(12,16,19,.9) 46%, rgba(12,16,19,.82) 100%);
}
.ac-pv2-serveur > * { position: relative; }
.ac-pv2-jaquette {
    width: 92px; height: 42px; border-radius: 6px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07);
}
.ac-pv2-jaquette img { max-width: 84%; max-height: 30px; width: auto; height: auto; object-fit: contain; display: block; }
.ac-pv2-serveur-nom { font-family: var(--titre); font-size: 13px; font-weight: 800; color: #f1f5f9; letter-spacing: -.02em; }
.ac-pv2-etat { display: flex; align-items: center; gap: 6px; font-size: 8px; color: #9aa7b4; margin-top: 7px; }
.ac-pv2-etat b { color: #4ade80; font-weight: 600; }
.ac-pv2-actions { display: flex; gap: 6px; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.ac-pv2-actions span {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 7.5px; font-weight: 700; border-radius: 7px; padding: 6px 9px;
}
.ac-pv2-actions i { font-size: 6px; }
.ac-pv2-go   { color: #4ade80; border: 1px solid rgba(74,222,128,.35); background: rgba(74,222,128,.08); }
.ac-pv2-stop { color: #f87171; border: 1px solid rgba(248,113,113,.35); background: rgba(248,113,113,.08); }
.ac-pv2-boot { color: #fbbf24; border: 1px solid rgba(251,191,36,.35); background: rgba(251,191,36,.08); }
.ac-pv2-tuer { color: #9aa7b4; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }

.ac-pv2-jetons { display: flex; gap: 7px; min-width: 0; flex-wrap: wrap; }
.ac-pv2-jeton {
    display: inline-flex; align-items: center; gap: 6px;
    background: #14181b; border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px; padding: 5px 9px;
    font-family: ui-monospace, monospace; font-size: 7.5px; color: #9aa7b4;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-pv2-jeton em { color: #5b6a79; font-style: normal; }
.ac-pv2-jeton i  { font-size: 7px; color: #5b6a79; }
.ac-pv2-jeton-clair { font-size: 7px; color: #c9d4de; }

/* ══ La page Console ══
   Terminal à gauche, compteurs de ressources à droite : la colonne des
   compteurs est fixée à 118px parce que son contenu est un nombre, pas un
   texte — elle n'a aucune raison de grandir avec la fenêtre. */
.ac-pv2-console { display: grid; grid-template-columns: minmax(0,1fr) 118px; gap: 9px; align-items: start; }

.ac-pv2-term {
    background: #101315; border: 1px solid rgba(255,255,255,.06);
    border-radius: 11px; overflow: hidden; min-width: 0;
}
.ac-pv2-term-tete {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 11px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.ac-pv2-term-titre { font-size: 9.5px; font-weight: 700; color: #e6edf3; display: inline-flex; align-items: center; gap: 6px; }
.ac-pv2-term-titre i { color: #1e9df1; font-size: 8px; }
.ac-pv2-term-etat {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.28);
    color: #4ade80; border-radius: 20px; padding: 3px 8px; font-size: 6.5px; font-weight: 700;
}
.ac-pv2-term-etat i { width: 4px; height: 4px; border-radius: 50%; background: #4ade80; display: block; }
.ac-pv2-term-outils { margin-left: auto; display: flex; gap: 5px; }
.ac-pv2-term-outils > span {
    display: inline-flex; align-items: center; gap: 4px;
    background: #14181b; border: 1px solid rgba(255,255,255,.07); border-radius: 6px;
    padding: 4px 7px; font-size: 6.5px; color: #9aa7b4;
}
.ac-pv2-term-outils i { font-size: 6px; }

/* Le journal : du texte à 5,5px, illisible et c'est voulu — c'est la TRAME
   d'une console qu'on montre, pas son contenu. Le bloc est en aria-hidden, et
   `overflow:hidden` coupe les lignes plutôt que de les faire déborder. */
.ac-pv2-term-log {
    background: #05070a; padding: 8px 10px;
    font-family: ui-monospace, monospace; font-size: 5.5px; line-height: 1.62;
    color: #b8c4d0; height: 150px; overflow: hidden;
    white-space: nowrap; text-overflow: clip;
}
.ac-pv2-term-h   { color: #64748b; }
.ac-pv2-term-tag { color: #7dd3fc; }
.ac-pv2-term-saisie {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 10px; border-top: 1px solid rgba(255,255,255,.05); background: #0b0e10;
}
.ac-pv2-term-chevron { font-family: ui-monospace, monospace; font-size: 8px; color: #4ade80; }
.ac-pv2-term-saisie em { flex: 1; font-family: ui-monospace, monospace; font-size: 7px; color: #4a5866; font-style: normal; }
.ac-pv2-term-envoi {
    width: 20px; height: 16px; border-radius: 5px; flex: none;
    background: #2563eb; color: #fff; font-size: 7px;
    display: flex; align-items: center; justify-content: center;
}

.ac-pv2-jauges { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ac-pv2-jauge-carte {
    background: #101315; border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px; padding: 9px 10px;
}
.ac-pv2-jauge-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 7px; }
.ac-pv2-jauge-tete > span { display: inline-flex; align-items: center; gap: 5px; font-size: 6.5px; font-weight: 700; letter-spacing: .5px; color: #9aa7b4; }
.ac-pv2-jauge-tete i { font-size: 6.5px; opacity: .8; }
.ac-pv2-jauge-tete b { font-family: var(--titre); font-size: 11px; font-weight: 800; letter-spacing: -.02em; }
.ac-pv2-bleu   { color: #38bdf8; }
.ac-pv2-vert   { color: #4ade80; }
.ac-pv2-orange { color: #fb923c; }
.ac-pv2-piste { height: 3px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.ac-pv2-piste i { display: block; height: 100%; border-radius: 3px; }
.ac-pv2-bleu-f   { background: #38bdf8; }
.ac-pv2-vert-f   { background: #4ade80; }
.ac-pv2-orange-f { background: #fb923c; }
.ac-pv2-jauge-pied { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 6px; color: #6b7a89; margin-top: 5px; }

.ac-pv2-trafic { display: grid; grid-template-columns: 1fr; gap: 6px; }
.ac-pv2-trafic > div { border-radius: 8px; padding: 7px 8px; }
.ac-pv2-recu    { background: rgba(74,222,128,.06); border: 1px solid rgba(74,222,128,.2); }
.ac-pv2-envoye  { background: rgba(30,157,241,.06); border: 1px solid rgba(30,157,241,.22); }
.ac-pv2-trafic-lbl { display: flex; align-items: center; gap: 5px; font-size: 6.5px; margin-bottom: 3px; }
.ac-pv2-recu   .ac-pv2-trafic-lbl { color: #4ade80; }
.ac-pv2-envoye .ac-pv2-trafic-lbl { color: #1e9df1; }
.ac-pv2-trafic-lbl i { font-size: 6px; }
.ac-pv2-trafic-val { font-family: var(--titre); font-size: 10.5px; font-weight: 800; color: #f1f5f9; letter-spacing: -.02em; }

/* ── Bande « Jeux populaires » ── */
.ac-jeux { padding: 0 var(--gout) 84px; }
.ac-jeux-boite {
    max-width: var(--maxw); margin: 0 auto;
    background: #fff; border: 1px solid var(--line); border-radius: 13px;
    padding: 18px 22px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.ac-jeux-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ac-jeux-tete strong { font-family: var(--titre); font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.ac-jeux-grille { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
/* Tuile sombre : la jaquette du jeu en fond, un voile par-dessus, le logo au
   centre. C'est le voile qui fait tenir les six logos ensemble — ils vont du
   blanc pur (FiveM, Garry's Mod) au bleu ardoise (Counter-Strike) et aucun ne
   passerait sur du blanc. */
.ac-jeu {
    position: relative; height: 66px; overflow: hidden;
    border: 1px solid rgba(15,23,42,.16); border-radius: 11px;
    background-color: #0b1220; background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s, box-shadow .18s;
}
.ac-jeu::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(2,6,23,.5), rgba(2,6,23,.8));
    transition: background .18s;
}
.ac-jeu img {
    position: relative; z-index: 1;
    max-width: 80%; max-height: 30px; width: auto; height: auto;
    object-fit: contain; display: block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
.ac-jeu-clair img { filter: brightness(1.75) drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
/* Logos presque carrés : plafonnés à la hauteur des bandeaux, ils paraissaient
   deux fois plus petits qu'eux. */
.ac-jeu-carre img { max-height: 40px; }
.ac-jeu:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(15,23,42,.55); }
/* Le voile s'éclaircit au survol : la jaquette se dévoile, le logo reste net. */
.ac-jeu:hover::after { background: linear-gradient(180deg, rgba(2,6,23,.34), rgba(2,6,23,.68)); }

/* ════════════════════════════════════════════════════════════════════
   DATACENTERS
════════════════════════════════════════════════════════════════════ */
.ac-dc { padding: 0 var(--gout) 24px; }
.ac-dc .ac-h2 { margin-bottom: 22px; }
/* Le rapport 2,511 découpe la bande visible du globe : la scène montre les 39,83 %
   de hauteur de sphère qui vont de 19,66 % à 59,49 % — l'Atlantique Nord, de
   ~29°N à ~77°N. Tout est proportionnel à la largeur, donc la bande reste la même
   à toutes les tailles d'écran. */
.ac-dc-scene {
    position: relative;
    aspect-ratio: 2.511;
    display: grid; grid-template-columns: minmax(0,230px) minmax(0,1fr) minmax(0,230px);
    gap: 20px; align-items: center;
}

/* ── Le globe ──
   Son diamètre vaut la LARGEUR de la scène : la courbure de la sphère passe donc
   derrière les deux fiches, d'une carte à l'autre. On n'en voit qu'une bande —
   la planète dépasse largement en haut et en bas.

   translateY en POURCENTAGE et non en pixels : un pourcentage de transform se
   calcule sur la taille de l'élément (le globe), pas sur celle de la scène. Le
   calage tient donc à toutes les largeurs. */
.ac-dc-globe {
    position: absolute; top: 0; left: 0;
    width: 100%; aspect-ratio: 1;
    transform: translateY(-19.66%);
    pointer-events: none;

    /* Le fondu vertical de la bande. Il fait DEUX choses : il cache la sphère là
       où elle sortirait de la section — sinon elle passerait sur le titre et sous
       les quatre chiffres — et il éteint la bande en douceur, sans la trancher
       net. Les bornes sont celles de la scène dans le carré du globe : 19,66 % et
       59,49 %. Le masque porte sur le globe entier, donc sur toutes ses couches. */
    -webkit-mask-image: linear-gradient(180deg, transparent 19.6%, #000 26%, #000 53%, transparent 59.5%);
            mask-image: linear-gradient(180deg, transparent 19.6%, #000 26%, #000 53%, transparent 59.5%);
}
/* Le corps de la sphère. Il s'éteint AVANT le bord (transparent à 99 %) : aucun
   cercle net ne se dessine. C'est aussi lui qui donne le volume, le foyer clair
   étant décalé en haut à gauche. */
.ac-dc-globe::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 38% 26%,
        rgba(191,219,254,.62) 0%, rgba(147,197,253,.34) 42%,
        rgba(59,130,246,.16) 72%, rgba(37,99,235,.06) 90%, transparent 99%);
}
/* Une vraie carte de l'Atlantique Nord. Le SVG n'est pas affiché : il sert de
   MASQUE, et la trame de points ne se voit donc qu'à travers les terres. Le
   masque CSS d'une image externe travaille sur le canal alpha — les continents
   sont en blanc opaque dans le fichier, la mer y est transparente.
   Si un navigateur ne gère pas mask-image, la trame remplit le rectangle : on
   retombe exactement sur l'ancienne version, jamais sur un trou. */
/* La teinte glisse d'ouest en est — cyan sur l'Amérique, bleu au milieu de
   l'Atlantique, violet sur l'Europe — et deux foyers plus vifs allument les deux
   villes. C'est ce dégradé qui donne de la vie à la carte : une trame d'une seule
   couleur, elle, reste un fond de page. */
/* La teinte glisse d'ouest en est — cyan sur l'Amérique, bleu au milieu de
   l'Atlantique, violet sur l'Europe — et deux foyers plus vifs allument les deux
   villes. C'est ce dégradé qui donne de la vie au globe : une trame d'une seule
   couleur, elle, reste un fond de page. */
.ac-dc-terres,
.ac-dc-carte {
    position: absolute; inset: 0; display: block;
    background-image:
        radial-gradient(circle 190px at 29.03% 40.68%, #22d3ee, transparent 70%),
        radial-gradient(circle 190px at 69.16% 38.45%, #a855f7, transparent 70%),
        linear-gradient(102deg, #0891b2 0%, #2563eb 42%, #4f46e5 64%, #9333ea 100%);
    /* Le masque découpe les terres de l'hémisphère visible. Pas de fondu de bord
       ici, contrairement à la version plate : le globe a déjà sa forme, et un
       second masque rongerait les côtes du limbe. */
    -webkit-mask-image: url('/images/accueil/globe-atlantique.svg');
            mask-image: url('/images/accueil/globe-atlantique.svg');
    -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* La trame de points par-dessus. Un TROISIÈME masque s'ajoute ici : la grille de
   points elle-même. Les points prennent donc la couleur du dégradé au lieu d'un
   bleu unique — c'est pour ça que la couche est masquée plutôt que peinte. */
/* La trame de points par-dessus. Un SECOND masque s'ajoute ici : la grille de
   points elle-même. Les points prennent donc la couleur du dégradé au lieu d'un
   bleu unique — c'est pour ça que la couche est masquée plutôt que peinte.
   1,25px de rayon tous les 6px : plus fin, la couleur ne ressortait pas et le
   globe revenait à un gris bleuté. */
.ac-dc-carte {
    -webkit-mask-image: url('/images/accueil/globe-atlantique.svg'),
                        radial-gradient(circle, #000 1.25px, transparent 1.35px);
            mask-image: url('/images/accueil/globe-atlantique.svg'),
                        radial-gradient(circle, #000 1.25px, transparent 1.35px);
    -webkit-mask-size: 100% 100%, 6px 6px;
            mask-size: 100% 100%, 6px 6px;
    -webkit-mask-repeat: no-repeat, repeat;
            mask-repeat: no-repeat, repeat;
    -webkit-mask-composite: source-in;  mask-composite: intersect;
}
/* Les terres en aplat sous la trame : sans elles, les côtes n'existent qu'en
   pointillés et le continent se lit mal. */
.ac-dc-terres { opacity: .14; }

/* La liaison partage le canevas 1000×1000 du masque : elle est donc calée sur le
   globe sans calcul. Le trait garde son épaisseur grâce à vector-effect. */
.ac-dc-liaison { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Les deux villes, à leur position projetée réelle dans la fenêtre. Ce sont des
   éléments CSS et non des cercles SVG : sous preserveAspectRatio="none", un
   cercle SVG deviendrait une ellipse. */
/* Les deux villes, à leur position projetée réelle sur la sphère. Rien ne bouge :
   ni onde, ni point qui circule — la planète se regarde, elle ne clignote pas. */
.ac-dc-pt {
    position: absolute; width: 11px; height: 11px; border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2.5px solid #fff;
}
/* Chaque ville prend la couleur de son bout du dégradé : le point et le globe
   parlent alors de la même chose. */
.ac-dc-pt-mtl { left: 29.03%; top: 40.68%; background: #0891b2; box-shadow: 0 0 0 4px rgba(8,145,178,.2), 0 2px 8px rgba(15,23,42,.25); }
.ac-dc-pt-par { left: 69.16%; top: 38.45%; background: #9333ea; box-shadow: 0 0 0 4px rgba(147,51,234,.2), 0 2px 8px rgba(15,23,42,.25); }

.ac-dc-milieu { min-height: 1px; }

/* Le logo, posé au sommet de la liaison — au-dessus de l'Atlantique, entre les
   deux datacenters. */
.ac-dc-blason {
    position: absolute; left: 48.83%; top: 36.55%;
    transform: translate(-50%, -50%);
    width: 58px; height: 58px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15,23,42,.08), 0 16px 36px -16px rgba(37,99,235,.55);
    display: flex; align-items: center; justify-content: center;
}
.ac-dc-blason img { width: 32px; height: auto; display: block; }
.ac-dc-site {
    position: relative; background: #fff;
    border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
    box-shadow: 0 12px 30px -24px rgba(15,23,42,.5);
}
.ac-dc-site-tete { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ac-dc-site-tete img { width: 18px; height: auto; display: block; border-radius: 2px; }
.ac-dc-site-tete strong { font-family: var(--titre); font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.ac-dc-site-liste { display: flex; flex-direction: column; gap: 8px; font-size: 11px; color: var(--muted); }
.ac-dc-site-liste span { display: flex; align-items: center; gap: 9px; }
.ac-dc-site-liste i { color: var(--blue); font-size: 9px; flex: none; }

/* ── Les quatre chiffres ── */
.ac-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 26px; }
.ac-chiffre {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 17px 19px; display: flex; align-items: center; gap: 13px;
}
.ac-chiffre-icone {
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    background: rgba(37,99,235,.09); color: var(--blue);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.ac-chiffre-val {
    font-family: var(--titre); font-size: 18px; font-weight: 800;
    letter-spacing: -.02em; color: var(--blue); line-height: 1.1;
}
.ac-chiffre-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ════════════════════════════════════════════════════════════════════
   DÉVELOPPEMENT & ENTREPRISE
════════════════════════════════════════════════════════════════════ */
.ac-dev { padding: 58px var(--gout) 10px; }
.ac-dev-tete {
    display: flex; align-items: center; justify-content: space-between;
    gap: 30px; flex-wrap: wrap; margin-bottom: 34px;
}
.ac-dev-grille { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 26px; }
.ac-dev-item i { color: var(--blue); font-size: 15px; display: block; margin-bottom: 11px; }
.ac-dev-item strong {
    font-family: var(--titre); font-size: 12.5px; font-weight: 800;
    letter-spacing: -.01em; display: block; margin-bottom: 6px;
}
.ac-dev-item p { font-size: 11px; line-height: 1.65; color: var(--muted); margin: 0; }

/* ════════════════════════════════════════════════════════════════════
   ÉQUIPE
════════════════════════════════════════════════════════════════════ */
.ac-equipe { padding: 62px var(--gout) 20px; }
.ac-equipe-grille {
    max-width: var(--maxw); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 52px; align-items: center;
}
.ac-equipe-photo { display: block; width: 100%; border-radius: 13px; overflow: hidden; }
/* LE CADRE PREND LE RAPPORT DE L'IMAGE, et non l'inverse.
   Il était en 16/9,6 — soit 1,67:1 — pour la photographie qui servait ici
   avant. L'illustration qui l'a remplacée fait 1408 × 768, donc 1,83:1 :
   `cover` rognait les côtés, et c'est précisément là que se trouvent les
   écussons Canada et France, en bas à droite. Au rapport du fichier, rien
   n'est coupé — et `cover` peut rester, il n'a simplement plus rien à rogner. */
.ac-equipe-photo img {
    display: block; width: 100%; height: 100%;
    aspect-ratio: 1408 / 768; object-fit: cover;
    border-radius: 13px;
}
.ac-equipe-grille .ac-h2 { line-height: 1.22; margin-bottom: 16px; }
.ac-equipe-texte { font-size: 12.5px; line-height: 1.8; color: var(--muted); margin: 0 0 24px; max-width: 430px; text-wrap: pretty; }
.ac-equipe-grille .ac-checks { gap: 13px; margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════
   AVIS
════════════════════════════════════════════════════════════════════ */
.ac-avis { padding: 58px var(--gout) 20px; }
.ac-avis-tete { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ac-avis .ac-h2 { margin-bottom: 28px; }
.ac-avis-moy { font-size: 11.5px; color: var(--muted); margin: -18px 0 28px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-avis-moy b { color: var(--ink); font-weight: 700; }
.ac-avis-moy i { color: #f59e0b; font-size: 11px; }

.ac-avis-grille { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.ac-avis-carte {
    background: #fff; border: 1px solid var(--line); border-radius: 13px;
    padding: 20px 22px 18px; display: flex; flex-direction: column;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.ac-avis-etoiles { color: #f59e0b; font-size: 12px; letter-spacing: 2px; margin-bottom: 14px; }
.ac-avis-etoiles i.ac-vide { opacity: .22; }
.ac-avis-txt { font-size: 12px; line-height: 1.8; color: #475569; margin: 0 0 20px; flex: 1; }
.ac-avis-auteur { display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--line-2); padding-top: 15px; }
.ac-avis-av {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700; font-family: var(--titre);
}
.ac-avis-nom { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.ac-avis-svc { font-size: 10px; color: var(--muted-2); margin-top: 2px; display: block; }

.ac-avis-vide {
    background: #fff; border: 1px dashed var(--line); border-radius: 13px;
    padding: 34px 22px; text-align: center; color: var(--muted); font-size: 12.5px;
}
.ac-avis-vide i { color: #f59e0b; font-size: 20px; display: block; margin-bottom: 10px; }
.ac-avis-pied { margin-top: 22px; text-align: center; }
.ac-avis-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--line); border-radius: 9px;
    padding: 12px 22px; font-family: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--blue); cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
}
.ac-avis-btn:hover { border-color: rgba(37,99,235,.4); box-shadow: 0 12px 26px -18px rgba(15,23,42,.4); }
.ac-avis-attente { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }

/* ── Trustpilot ──
   Le bloc s'insère entre les témoignages et le bouton « Laisser mon avis ». Il
   reste DISCRET à dessein : les avis de la maison occupent la section, la note
   publique est une confirmation, pas le sujet. D'où le filet qui le sépare et
   la petite mention grise qui l'introduit.

   Rien de tout ceci n'est rendu sans identifiant configuré — voir
   config/services.php. */
.ac-avis-tp {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    flex-wrap: wrap; margin-top: 26px; padding-top: 22px;
    border-top: 1px solid var(--line-2);
}
.ac-avis-tp-lbl {
    font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--muted-2);
}
/* Le widget se dimensionne lui-même ; on lui garde seulement une largeur
   raisonnable pour qu'il ne s'étire pas sur toute la section. */
.ac-avis-tp .trustpilot-widget { min-width: 190px; max-width: 320px; }
/* Le lien de repli, visible tant que le script n'a pas pris la main : sans
   couleur ni soulignement il passerait pour du texte mort. */
.ac-avis-tp .trustpilot-widget > a { font-size: 13px; font-weight: 700; color: var(--blue); }

.ac-avis-tp-lien {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--muted);
    transition: color .18s;
}
.ac-avis-tp-lien:hover { color: var(--blue); }

/* ════════════════════════════════════════════════════════════════════
   BLOC D'APPEL FINAL
   Reste sombre, comme la maquette. Sur fond clair, un voile translucide
   l'aurait rendu blanc — et son texte blanc, invisible : la couleur est donc
   posée en dur.
════════════════════════════════════════════════════════════════════ */
.ac-cta { padding: 52px var(--gout) 58px; }
/* LE FOND VA DU BLEU NUIT AU TURQUOISE, de gauche à droite.
   Il était bleu d'un bout à l'autre. Le dégradé traverse maintenant sept
   arrêts jusqu'au vert-bleu : moins d'arrêts laissaient une bande grise au
   milieu, là où le bleu et le turquoise se croisent sans se ressembler.

   La lueur radiale est posée PAR-DESSUS le dégradé et décalée à 74 % : c'est
   l'endroit où se tient l'illustration, et c'est elle qui fait que le visuel
   semble éclairer la boîte au lieu d'y être collé. */
.ac-cta-boite {
    max-width: var(--maxw); margin: 0 auto; position: relative;
    background:
        radial-gradient(ellipse 58% 130% at 74% 50%, rgba(34,211,238,.20), transparent 64%),
        linear-gradient(100deg,
            #071320 0%, #0a1e33 28%, #0c2b3f 48%, #0d3a45 66%,
            #0d4749 80%, #0d5351 92%, #0e5a55 100%);
    border-radius: 16px; overflow: hidden;
    display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
    align-items: center;
}
.ac-cta-texte { padding: 44px 46px; position: relative; z-index: 1; }
.ac-cta-texte h2 {
    font-size: 28px; font-weight: 800; letter-spacing: -.028em;
    color: #f8fafc; margin: 0 0 12px;
}
.ac-cta-texte p { font-size: 12.5px; line-height: 1.7; color: #9fb2c7; margin: 0 0 24px; }
.ac-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.ac-cta-btns .ac-btn { font-size: 12.5px; padding: 13px 21px; box-shadow: 0 14px 30px -14px rgba(37,99,235,1); }
.ac-cta-btns .ac-btn-fantome { font-size: 12.5px; padding: 13px 19px; }
.ac-cta-btns .ac-btn-fantome i { color: var(--cyan); font-size: 11px; }
.ac-cta-visuel { position: relative; min-height: 210px; align-self: stretch; }
/* L'illustration se DISSOUT dans le fond par la gauche, au lieu de s'arrêter
   sur une arête verticale au milieu de la boîte. Le masque efface ses 22
   premiers pour cent : quel que soit le fond du fichier fourni, la jonction
   avec le dégradé ne se voit plus. */
.ac-cta-visuel img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center right; display: block;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
/* Sans illustration, la moitié droite garde une lueur plutôt qu'un vide. */
.ac-cta-lueur {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 90% at 70% 50%, rgba(100,210,255,.16), transparent 70%);
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   RACCORD VERS LE PIED DE PAGE
   Le pied de page du site est en `background: transparent` avec du texte
   blanc (voir layouts/app.blade.php) : il compte sur le fond sombre des
   autres pages. Sur ce thème clair il tomberait à 1,1:1, illisible. On lui
   rend un fond sombre, et ce fondu l'amène sans marche d'escalier — même
   geste que sur /service/domaines et /service/web.

   `body .footer-…` et non `.footer-…` seul : le gabarit pose
   `background: transparent !important` dans un <style> de fin de page, et à
   spécificité égale c'est le dernier déclaré qui gagne.
════════════════════════════════════════════════════════════════════ */
.ac-fondu-bas {
    height: 130px;
    background: linear-gradient(180deg,
        #ffffff 0%, #e7ecf1 14%, #b9c6d1 30%, #7d94a8 46%,
        #4c6a80 60%, #294a63 74%, #172f4a 85%, #0b1e33 100%);
}
body .footer-ultra-modern {
    background: #0b1e33 !important;
    border-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   La maquette n'a qu'une largeur (1280). Ces paliers ne font que l'empêcher
   de déborder plus bas ; aucun ne change le rendu au-dessus de 1080px.
════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .ac-cartes    { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ac-chiffres  { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ac-dev-grille{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
    .ac-jeux-grille { grid-template-columns: repeat(3, minmax(0,1fr)); }
    /* Le faux panel est dessiné en pixels pour une colonne de ~690px : sous
       cette largeur il passe pleine largeur plutôt que d'être écrasé. */
    .ac-panel-grille { grid-template-columns: minmax(0,1fr); gap: 32px; }
    .ac-equipe-grille { gap: 34px; }
}
@media (max-width: 900px) {
    .ac-hero-grille { grid-template-columns: minmax(0,1fr); padding-bottom: 40px; }
    /* Une seule colonne : le texte occupe toute la largeur, l'image n'a plus
       de place à réserver — et le voile de gauche s'étend pour rester
       lisible par-dessus. */
    .ac-hero-place { display: none; }
    .ac-hero-texte { padding-bottom: 0; }
    /* Le visuel, lui, RESTE : c'est la plus belle chose du hero, et il n'a pas de
       raison de disparaître sur le format où les gens arrivent le plus. Il passe
       simplement sous le texte, centré et un cran moins arrondi. */
    .ac-hero-carte { max-width: 100%; margin: 4px auto 0; border-radius: 18px; }
    .ac-hero-visuel-lueur { inset: -10% -6%; }
    .ac-hero-voile-1 { background: linear-gradient(90deg, rgba(5,10,20,.97) 0%, rgba(5,11,22,.93) 62%, rgba(6,14,28,.72) 100%); }
    .ac-hero-voile-3 { width: 100%; }
    .ac-hero h1 { font-size: 38px; }
    .ac-avis-grille { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ac-equipe-grille { grid-template-columns: minmax(0,1fr); }
    /* Les deux fiches s'empilent, et le globe QUITTE la position absolue pour
       passer dans le flux, au-dessus d'elles : centré derrière deux fiches
       empilées, il n'en restait qu'un éclat de points visible entre les deux.
       Sa taille reste sous la largeur utile (375px moins les gouttières, soit
       ~331px) — un élément plus large fait défiler la page latéralement, même en
       position absolue. */
    .ac-dc-scene {
        aspect-ratio: auto;
        grid-template-columns: minmax(0,1fr);
        gap: 14px;
        min-height: 0;
    }
    /* Le globe redevient une sphère ENTIÈRE, dans le flux : la bande étirée n'a de
       sens qu'entre deux fiches côte à côte. Le masque vertical part avec elle,
       sinon il couperait la planète en deux. */
    .ac-dc-globe {
        position: relative; top: auto; left: auto; transform: none;
        width: 250px; height: 250px; aspect-ratio: auto;
        margin: 0 auto 4px; order: -1;
        -webkit-mask-image: none; mask-image: none;
    }
    /* La liaison, les points et le logo partiraient dans l'échelle : à 250px, le
       logo occuperait un quart de la planète. On garde la planète seule. */
    .ac-dc-liaison,
    .ac-dc-pt,
    .ac-dc-blason,
    .ac-dc-milieu { display: none; }
}
@media (max-width: 700px) {
    .ac { --gout: 22px; }
    .ac-hero-grille { padding-top: 118px; }
    .ac-hero h1 { font-size: 32px; }
    .ac-solutions { padding-top: 54px; padding-bottom: 58px; }
    .ac-solutions .ac-h2 { font-size: 25px; margin-bottom: 32px; }
    .ac-cartes { grid-template-columns: minmax(0,1fr); }
    /* Les 26px de marge intérieure sont ceux du bureau ; sur téléphone ils
       reprennent 4px à la ligne « + VPS SSD et HDD — prochainement », qui remplit
       déjà 277 des 277px utiles. Elle passerait simplement à la ligne (le libellé
       est en bloc), mais ces 4px ne coûtent rien à rendre. */
    .ac-carte { padding: 26px 24px 24px; }
    .ac-avis-grille { grid-template-columns: minmax(0,1fr); }
    .ac-dev-grille { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ac-jeux-grille { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ac-cta-boite { grid-template-columns: minmax(0,1fr); }
    .ac-cta-texte { padding: 32px 26px; }
    /* Le visuel passe sous le texte : il lui faut une hauteur propre, sinon
       il se réduit à rien. */
    .ac-cta-visuel { min-height: 170px; order: 2; }
    .ac-h2 { font-size: 23px; }
    .ac-panel-grille .ac-h2 { font-size: 24px; }
}
@media (max-width: 560px) {
    /* Le terminal et les compteurs cessent de tenir côte à côte : les
       compteurs passent dessous, en ligne. */
    .ac-pv2-console { grid-template-columns: minmax(0,1fr); }
    .ac-pv2-jauges { flex-direction: row; flex-wrap: wrap; }
    .ac-pv2-jauge-carte { flex: 1 1 46%; }
    .ac-pv2-trafic { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
    /* 27px : « vos projets numériques. » demande 297px pour 331px utiles. À 32px
       il en fallait 366 et le titre passait sur trois lignes. */
    .ac-hero h1 { font-size: 27px; }
    .ac-chiffres { grid-template-columns: minmax(0,1fr); }
    .ac-dev-grille { grid-template-columns: minmax(0,1fr); }
    /* En dessous de ~430px la barre latérale du faux panel prend la moitié de
       l'écran : on ne garde que le corps, qui porte l'essentiel. */
    .ac-pv2 { grid-template-columns: minmax(0,1fr); }
    .ac-pv2-flanc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    /* Les cartes Solutions ne déplacent plus rien au survol : il ne reste ici
       qu'à couper le fondu, pour que le changement de couleur soit immédiat au
       lieu d'être une animation de plus. Le `transform: none` ci-dessous ne
       concerne donc que les vignettes de jeux et les boutons, qui se lèvent
       encore, eux. */
    .ac-carte, .ac-carte-icone, .ac-jeu, .ac-btn { transition: none; }
    .ac-jeu:hover, .ac-btn:hover { transform: none; }
}